简单粗暴 直接进入主题：
Html
<script src="../js/jquery-2.1.1.min.js"></script> <style> #pic { width: 100px; height: 100px; border-radius: 50%; margin: 20px auto; cursor: pointer; } </style> <script> $(function () { $("#pic").click(function () { $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传 $("#upload").on("change", function () { console.log(this.files[0]); var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径 console.log(objUrl); if (objUrl) { $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片 Upimg(); } }); }); }); //建立一個可存取到該file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } function Upimg() { var data = new FormData(); // 实例化一个表单数据对象 var files = $('#upload').get(0).files; if (files.length > 0) { data.append("ImgFile", files[0]); } var ajaxRequest = $.ajax({ type: "POST", url: "ajaxFileUpload.ashx", contentType: false, processData: false, async: true, data: data, success: function (data) { if ( data == "1") { // alert("上传图片成功") } else { //alert("上传图片失败") } } }); } </script> </head> <body> <img id="pic" src="../img/QQ图片20180327153818.jpg" /> <input id="upload" name="file" accept="image/*" type="file" style="display: none" /> </body>
后台页面：
一般处理程序： using System; using System.Collections.Generic; using System.Linq; using System.Web; using DBUtility; using System.IO; namespace MallApi.upImg { /// <summary> /// ajaxFileUpload 的摘要说明 /// </summary> public class ajaxFileUpload : IHttpHandler { // 锁定变量 private Object thisLock = new Object(); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.ContentType = "text/plain"; // HttpFileCollection files = context.Request.Files; // var ImgFiles = HttpContext.Current.Request.Files["ImgFile"]; var files = HttpContext.Current.Request.Files["ImgFile"]; string act = context.Request["act"];// HttpContext.Current.Request.Files["act"].ToString(); String result = string.Empty; String[] paths = new String[3]; try { lock (thisLock) { string fileName = "logo"; string filePath = "../img/" + fileName + "." + "jpg"; //虚拟路径 string truepath = "..\\img\\"; // 物理路径 if (files != null) { var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath(truepath), fileName + "." + "jpg"); // 物理路径 if (System.IO.File.Exists(fileSavePath)) { System.GC.Collect(); System.IO.File.Delete(fileSavePath); } files.SaveAs(fileSavePath); result = "1"; } else { result = "0"; } } } catch (Exception ex) { result = "0"; } context.Response.Write(result); } public bool IsReusable { get { return false; } } } }
