Html

Css

Js

文件上传 带 进度条 $ajax


    
        选择上传文件
    


    

        
0%
    
    
    开始上传文件
    

h1 { text-align:center; } form { width:600px; margin:auto; padding:20px 50px; border:1px solid #0091f2; border-radius:10px; display:block; } input { font-size:24px; margin:10px; } .clear { clear:both; } .speed_box { width:600px; height:20px; display:none; border:1px solid #0091f2; border-radius:10px; overflow:hidden; } #file_box { min-width:600px; min-height:300px; border:1px solid #0091f2; border-radius:10px; display:inline-block; background:#EEE; overflow:hidden; z-index:999999; } #speed { width:0; height:100%; background:#0091f2; color:white; text-align:center; line-height:20px; font-size:16px; } #file_size,#file_type { display:inline-block; padding:0px 16px; font-size:16px; color:#0091f2; font-weight:bold; } #file_type { margin-top:30px; } .opts_btn { position:relative; display:inline-block; padding:8px 16px; font-size:16px; color:white; text-decoration:none; background:#0091f2; border:2px solid #0091f2; border-radius:3px; cursor:pointer; overflow:hidden; } .oFile { position:absolute; width:100%; height:100%; z-index:10; top:0px; left:0px; opacity:0; } .send_btn { display:inline-block; display:none; float:right; margin-top:20px; padding:8px 16px; font-size:16px; color:white; background:#0091f2; border:1px solid transparent; border-radius:2px; cursor:pointer; }

var uploadUrl = 'https://xxxxxxx'; //文件选择完毕时 function FileChangeFn(event) { $('.opst_txt').text('重新选择文件'); $('.send_btn').show(); var event = event || window.event, dom = '', ofile = $("#oFile").get(0).files[0], otype = ofile.type || '获取失败', osize = ofile.size / 1054000, ourl = window.URL.createObjectURL(ofile); //文件临时地址 $('#file_type').text("选择上传文件类型：" + otype); $('#file_size').text("选择上传文件大小，共" + osize.toFixed(2) + "MB。"); console.log("文件类型：" + otype); //文件类型 console.log("文件大小：" + osize); //文件大小 if ('video/mp4' == otype || 'video/avi' == otype || 'video/x-msvideo' == otype) { dom = '<video id="video" width="100%" height="100%" controls="controls" autoplay="autoplay" src=' + ourl + '></video>'; } if ('audio/mp3' == otype || 'audio/wav' == otype || 'audio/x-m4a' == otype) { dom = '<audio id="audio" width="100%" height="100%" controls="controls" autoplay="autoplay" loop="loop" src=' + ourl + ' ></audio>'; } if ('image/jpeg' == otype || 'image/png' == otype || 'image/gif' == otype) { dom = '<img id="photo" width="100%" height="100%" alt="我是image图片文件" src=' + ourl + ' title="" />'; } $('#file_box').html(dom); }; //侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次 function OnProgRess(event) { var event = event || window.event; //console.log(event); //事件对象 console.log("已经上传：" + event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小) //console.log(event.total); //附件总大小(固定不变) var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比 $("#speed").html(loaded + "%").css("width", loaded + "%"); }; //开始上传文件 function UploadFileFn() { $('.speed_box').show(); var oFile = $("#oFile").get(0).files[0], //input file标签 formData = new FormData(); //创建FormData对象 xhr = $.ajaxSettings.xhr(); //创建并返回XMLHttpRequest对象的回调函数(jQuery中$.ajax中的方法) formData.append("UploadForm[image]", oFile); //将上传name属性名(注意：一定要和 file元素中的name名相同)，和file元素追加到FormData对象中去 $.ajax({ type: "POST", url: uploadUrl, // 后端服务器上传地址 data: formData, // formData数据 cache: false, // 是否缓存 async: true, // 是否异步执行 processData: false, // 是否处理发送的数据 (必须false才会避开jQuery对 formdata 的默认处理) contentType: false, // 是否设置Content-Type请求头 xhr: function() { if (OnProgRess && xhr.upload) { xhr.upload.addEventListener("progress", OnProgRess, false); return xhr; } }, success: function(returndata) { $("#speed").html("上传成功"); //alert(returndata); }, error: function(returndata) { $("#speed").html("上传失败"); console.log(returndata) alert('请正确配置后台服务！'); } }); };

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.1

HTML5 file 在选择上传文件的时候，根据需要可限制指定的文件类型(默认任意类型 )。在 input type="file" 加上 accept="指定要上传的文件类型"即可

例如：

<input type="file" id="oFile" name="myFiles" accept=".doc, .docx, .xls, .txt" onchange="FileChangeFn(event)" />
accept=".doc, .docx, .xls, .txt" 只能上传word, exls, .txt文件
accept=".rar, .zip" 只能上传压缩文件
accept=".mp3" 只能上传mp3文件
accept=".mp4, .avi, .swf, .mpeg" 只能上传视频文件
accept=".jpg, .jpeg .png, .gif, .bmp" 只能上传指定的这些图片文件
accept="image/*" image表示图片，*表示所有支持的格式， video/* video表示视频，*表示所有支持的格式
注： 如果不加accept属性，则上传任意类型的文件(默认)

注： 如果不加accept属性，则上传任意类型的文件(默认)

Html5 file 在选择上传文件的时候，根据需要可限制选择 1个 或 多个 文件。在 input type="file" 加上 multiple 属性 即可

例如：

<input type="file" id="oFile" name="myFiles" multiple onchange="FileChangeFn(event)" />

加上 multiple 属性 就可以多选啦：可按住鼠标左键拖动进行多选，或按下键盘上的Ctrl键，或 Shitf键 再鼠标左键点选，或 Ctrl + A 全选

注： 默认情况下一般都没加multiple 属性，所以只能选择1件文件

最后：如果以上两种情况都要用到时，就同时加上 multiple属性 和 accept="指定要上传的文件类型"属性即可！

例如：

<input type="file" id="oFile" name="myFiles" multiple accept=".jpg, .jpeg .png, .gif, .bmp" onchange="FileChangeFn(event)" />

使用说明：

1、默认情况下：上传按扭，上传进度条，文件大小，文件类型，都是被隐藏的，要先选择文件后才能显示出来。

2、在中间的大灰色框中，可根据所选择的上传类型，显示出来，类型为：音频，视频，图片。

3、代码中的后端上传地址，只支持图片类型，其他类型的文件不能上传（根自己需求，正确配置后端上传地址）。

4、上传时如果文件太小，上传进度条可能一闪而过，（可将浏览器网络模拟成3G网等，或选择稍大点的文件）。

5、点击[选择上传文件]按扭时，弹出浏览框有点慢，这是因为input file类型 标签中 没有指定 accept="*"文件类型，所以它会检索全部类型，从而导致弹出时慢。