简单粗暴 直接进入主题：
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; ???????????} ???????} ???}}JS 上传图片 + 预览功能（二）
原文地址：https://www.cnblogs.com/hanxiaofei/p/9087235.html