1.首先引入jquery和jquery.form这两个js文件
jquery-1.9.1.js和jquery-form.js
<!--上传图片表单(隐藏)--> <form style="display:none" method="post" enctype="multipart/form-data" id="ImageForm" action="@Url.Action("UploadFile","Upload")"> <input type="file" id="realImage" name="Image" /> <input type="submit" value="上传" /> </form> <!--上传按钮(模拟上传)--> <a href="javascript:void(0)" id="uploadImage" style="margin-right:20px">上传图片</a> <input type="hidden" id="imageUrl"/> <a href="javascript:void(0)" id="viewImage">查看</a> <!--引用jquery文件和jquery.form文件--> <script src="~/Content/js/jquery-1.9.1.js"></script> <script src="~/Content/js/jquery-form.js"></script> <script type="text/javascript"> $(function () { //模拟文件上传 $("#uploadImage").on("click",function () { $("#realImage").click(); }) //文件异步上传 $("#realImage").on("change",function () { //异步提交表单 $("#ImageForm").ajaxSubmit(function (data) { var url = data.url; if (data.success) { $("#imageUrl").val(url); alert("上传成功"); } }); }); //绑定查看事件 $("#viewImage").on("click",function () { var url = $("#imageUrl").val(); window.open(url); }); }) </script>
3.后台图片或者文件处理代码
/// <summary> /// 文件上传 /// </summary> /// <param name="fileType">上传文件类型</param> /// <returns></returns> public ActionResult UploadFile(FileTypeEnum fileType = FileTypeEnum.Image) { string url = ""; switch (fileType) { case FileTypeEnum.Image: url = SaveImage(); break; case FileTypeEnum.Temp: url = SaveTemp(); break; default: break; } return Json(new { success = true,url = url }); } /// <summary> /// 保存图片 /// </summary> /// <returns>返回文件的相对路径</returns> public string SaveImage() { string url = ""; if (Request.Files.Count > 0) { //获取文件 HttpPostedFileBase file = Request.Files[0]; //相对路径 string relativeFolderPath = "/UploadFile/Images/" + DateTime.Now.ToString("yyyy-MM-dd") + "/",//文件夹的相对路径 physicalFolderPath = Server.MapPath("~" + relativeFolderPath);//文件夹物理路径 //判断磁盘上是否存在该物理路径,不存在则创建 if (!Directory.Exists(physicalFolderPath)) { Directory.CreateDirectory(physicalFolderPath); } string fileName = Guid.NewGuid() + ".jpg",//文件名 relativeFilePath = relativeFolderPath + fileName,//文件相对路径 physicalFilePath = physicalFolderPath + fileName;//文件绝对路径 file.SaveAs(physicalFilePath); url= relativeFilePath; } return url; } public string SaveTemp() { string url = ""; if (Request.Files.Count > 0) { //获取文件 HttpPostedFileBase file = Request.Files[0]; //相对路径 string relativeFolderPath = "/UploadFile/Temp/",//文件夹的相对路径 physicalFolderPath = Server.MapPath("~" + relativeFolderPath);//文件夹物理路径 //判断磁盘上是否存在该物理路径,不存在则创建 if (!Directory.Exists(physicalFolderPath)) { Directory.CreateDirectory(physicalFolderPath); } string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff")+Path.GetExtension(file.FileName),//文件相对路径 physicalFilePath = physicalFolderPath + fileName;//文件绝对路径 file.SaveAs(physicalFilePath); url = relativeFilePath; } return url; }原文链接:https://www.f2er.com/ajax/163946.html