@{ ViewBag.Title = "dddddddd"; Layout = "~/Areas/Wap/Views/Shared/_Head.cshtml"; } <html> <head> <title></title> </head> <body> <div data-role="page"> <script type="text/javascript"> var imgTypeArr = new Array(); var imgArr = new Array(); var isHand = 0;//1正在处理图片 var nowImgType = "image/jpeg"; var jic = { compress: function (source_img_obj, imgType) { //alert("处理图片"); source_img_obj.onload = function () { var cvs = document.createElement('canvas'); //naturalWidth真实图片的宽度 console.log("原图--" + this.width + ":" + this.height); var scale = 1; if (this.width > 200 || this.height > 200) { if (this.width > this.height) { scale = 200 / this.width; } else { scale = 200 / this.height; } } cvs.width = this.width * scale; cvs.height = this.height * scale; var ctx = cvs.getContext("2d"); ctx.drawImage(this, 0, 0, cvs.width, cvs.height); var newImageData = cvs.toDataURL(imgType, 0.8); base64Img = newImageData; imgArr.push(newImageData); // $("#canvasDiv").append(cvs); var img = new Image(); img.src = newImageData; $(img).css('width', 100 + 'px'); $(img).css('height', 100 + 'px'); $("#canvasDiv").append(img); isHand = 0; } } } function handleFileSelect(evt) { isHand = 1; imgArr = []; imgTypeArr = []; $("#canvasDiv").html(""); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } imgTypeArr.push(f.type); nowImgType = f.type; var reader = new FileReader(); // Read in the image file as a data URL. reader.readAsDataURL(f); // Closure to capture the file information. reader.onload = (function (theFile) { return function (e) { var i = new Image(); i.src = e.target.result; jic.compress(i, nowImgType); }; })(f); } } $(function () { document.getElementById('fileToUpload').addEventListener('change', handleFileSelect, false); }); function catUpload() { if (base64Img == "") { show_msg("请选择图片！"); return; } if (isHand == 1) { show_msg("请等待图片处理完毕！"); return; } $('.ui-loader').show(); $.ajax({ type: "POST", url: "/Upload/UploadImage1?path=new", data: { 'img': imgArr, 'type': imgTypeArr }, success: function (data) { //$('.ui-loader').hide(); //show_msg(data.info); alert(data.path) } }); } //消息提示 function show_msg(msg) { //消息显示时间 var time = arguments[1] ? arguments[1] : 1500; $('#info_pop p').text(msg); $("#info_pop").popup("open"); setTimeout('$("#info_pop").popup("close");', time); } </script> <div data-role="content"> <table style=" 100%;"> <tr> <td> <input id="fileToUpload" type="file" name="fileToUpload" accept="image/*" multiple="multiple"> </td> <td width="80" align="right"> <button class="ui-btn ui-icon-add ui-corner-all" onclick="catUpload();">压缩上传</button> </td> </tr> </table> <div id="canvasDiv"> </div> </div><!-- endContent --> <div data-role="popup" id="info_pop" class="ui-content" data-theme="d" style='font-weight:bold;font-size:14px; z-index: 999; background-color: white;'> <p>未知错误</p> </div> </div> </body> </html>
public ActionResult UploadImage1() { string path = string.Empty; string path_s = string.Empty; string type = string.Empty; string strs = Request["img[]"];//接收文件 byte[] arr = Convert.FromBase64String(strs.Split(',')[1]); MemoryStream ms = new MemoryStream(arr); string filename =Guid.NewGuid().ToString("N")+ ".jpg"; string fileext = Path.GetExtension(filename); if (!Directory.Exists(Server.MapPath("/ImageFiles/"))) { Directory.CreateDirectory(Server.MapPath("/ImageFiles/")); } string dircstr = "/ImageFiles/" + Request["path"] + "/"; if (!Directory.Exists(Server.MapPath(dircstr))) { Directory.CreateDirectory(Path.GetDirectoryName(Server.MapPath(dircstr))); } string fileloadname = dircstr + DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + filename; StreamWriter sw = new StreamWriter(Server.MapPath( fileloadname)); ms.CopyTo(sw.BaseStream); sw.Flush(); sw.Close(); ms.Close(); path += fileloadname ; return Content(JsonConvert.SerializeObject(new { success = true, path = path }), APPJSON); }