附带上传源码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>测试上传功能</title> 5 <meta charset='utf-8'/> 6 <style type="text/css"> 7 .vue-file-control{ 8 height:28px; 9 width:500px; 10 margin:100px; 11 } 12 .inputFileUpload 13 { 14 display: block; 15 position: relative; 16 width: 120px; 17 padding:8px 12px; 18 overflow: hidden; 19 border: 1px solid #EBEBEB; 20 background: none repeat scroll 0 0 #F3F3F3; 21 color: #999999; 22 cursor: pointer; 23 text-align: center; 24 float: left; 25 margin-right:5px; 26 border-radius:3px; 27 } 28 #textFileName 29 { 30 cursor: pointer; 31 display: block; 32 height:31px; 33 width:200px; 34 text-align: center; 35 overflow:hidden; 36 border:1px solid #f1f1f1; 37 display:inline-block; 38 border-radius:3px; 39 } 40 .btnUpload{ 41 display: inline-block; 42 padding:8px 10px; 43 background: #7CBAE9; 44 color:white; 45 margin-left:10px; 46 position:absolute; 47 cursor: pointer; 48 border-radius:3px; 49 } 50 .filePreview 51 { 52 cursor: pointer; 53 position: absolute; 54 top: 0; 55 left:0; 56 width: 150px; 57 height: 30px; 58 font-size: 150px; /* 增大不同浏览器的可点击区域 */ 59 opacity: 0; /* 实现的关键点 */ 60 filter: alpha(opacity=0); /* 兼容IE */ 61 } 62 .progressBarContainer{ 63 position:relative; 64 margin-top:10px; 65 height:8px; 66 background:#f6f6f6; 67 border-radius:3px; 68 width:100%; 69 } 70 .progressBarContainer>#loadingBar{ 71 position:absolute; 72 height:8px; 73 background:#09bb07; 74 border-radius:3px; 75 } 76 .progressBarContainer>#percentBar{ 77 position:absolute; 78 margin-top:22px; 79 } 80 #linkPreviewPDF{ 81 margin-left: 80px; 82 margin-top: 15px; 83 display: none; 84 } 85 </style> 86 <script src='./jquery.js'></script> 87 </head> 88 <body> 89 <div class='vue-file-control'> 90 <div class="inputFileUpload"> 91 <span>选择上传的文件</span> 92 <input title="支持pdf文件上传，文件小于5M" class="filePreview" type="file" accept='application/pdf' onchange="document.getElementById('textFileName').value=this.value" single></div> 93 <input type='text' id="textFileName" /> 94 <span class='btnUpload' >点击上传</span> 95 <div class='progressBarContainer'> 96 <div id='loadingBar'></div> 97 <div id="percentBar"></div> 98 </div> 99 <div id='linkPreviewPDF'> 100 <a href="#" >点击预览</a> 101 </div> 102 </div> 103 <script type="text/javascript"> 104 $(".btnUpload").on("click",function(){ 105 var file = $('input[type=file]')[0].files[0]; 106 var form = new FormData(); 107 form.append("file_type", "pdf"); 108 form.append("subpath", "//sub//test"); 109 form.append("upload_userid", "1"); 110 form.append("file_original_name", file.name); 111 form.append("file", file); 112 113 $.ajax({ 114 url: 'http://192.168.217.12/files/api/uploadfile', 115 type: 'POST', 116 data: form, 117 processData: false, 118 contentType: false, 119 xhr: function() { 120 var xhr = $.ajaxSettings.xhr(); 121 if (xhr.upload) { 122 //上传进度操作 123 xhr.upload.addEventListener('progress', function(e) { 124 var percentCount = ((e.loaded/e.total)*100).toFixed(0); 125 $('#loadingBar').css({"width":percentCount+"%"}); 126 if(percentCount==100){ 127 $("#percentBar").html("已完成"); 128 }else{ 129 $("#percentBar").html(percentCount+"%"); 130 } 131 }, false); 132 } 133 return xhr; 134 } 135 }).done(function(res){ 136 console.log("上传成功"); 137 $("div#linkPreviewPDF").find("a").attr("href","http://192.168.217.12"+res.returnObj.url).end().show(); 138 }).fail(function(err){ 139 console.log("上传失败"); 140 }); 141 }) 142 143 </script> 144 </body> 145 </html>
［图1］: 上传中。。。。。
［图2］：上传完成
［图3］：上传预览
