html5 文件上传与图片预览
<script type="text/javascript"> $(":file").change(function () { var appendImg = $(this).parent(); var reader = new FileReader(); reader.readAsDataURL(this.files[0]); reader.onload = function (e) { //var str = "<img src='" + e.target.result + "'/>"; //appendImg.append(str); //appendImg.css('background-image', e.target.result); appendImg.css("background-image", "url(" + e.target.result + ")"); appendImg.css("background-size", "cover"); } }) $('.btn_submit_apply').click(function () { var formData = new FormData($('.formbox')[0]); $.ajax({ type: 'post', //url: '../../../material/jQueryFileUpload?type=1', data: formData, contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置(详见:) processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post,详见:) xhr: xhrOnProgress(function (e) {// (详见:) var percent = e.loaded / e.total;//计算百分比 $('body').append('->' + percent); //alert(percent); }), success: function (data) { //$('body').append('完成'); if (data.Success) { alert(data.Msg); location.href = "@Url.Action("Index")"; } else { alert(data.Msg); } } }) }) // 监听上传进度 var xhrOnProgress = function (fun) { xhrOnProgress.onprogress = fun; //绑定监听 return function () { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } } </script>