ajaxfileupload單檔案上傳相容IE8及 input type=file樣式修改
阿新 • • 發佈:2019-01-29
ajaxfileupload單檔案上傳相容IE8
1、引用jquery和ajaxfileupload.js
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ajaxfileupload.js" type="text/javascript" charset="utf-8"></script>
2、手寫css
input.myFileUpload {
position: absolute; right: 0;
top: 0;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
}
a.file-button {
display: inline-block;
width: 100px;
height: 40px;
background: #00b3ee;
position: relative;
overflow: hidden;
text-align: center;
color: #fff;
border-radius: 3px;
line-height: 40px;
text-decoration: none;
float: left;
}
#file_name {
line-height: 40px;
float: left;
padding-left: 15px;
}3、載入html載入CSS後如圖<div class=""> <a href="#" class="file-button">選擇檔案 <input type="file" class="myFileUpload" name="myFile" id="fileInput" onchange="ajaxupload(this);"/> </a> <span id="file_name" ></span> </div>
4、關於檔案上傳的js程式碼(我這裡是doc、docx格式的word檔案上傳)
<script type="text/javascript"> function ajaxupload(dom){ var arrs=$(dom).val().split('\\'); var arr=$(dom).val().split('.'); var filetype=arr[arr.length-1];//檔案型別 if(filetype=="doc"||filetype=="docx"){//驗證上傳檔案格式 var filename=arrs[arrs.length-1]; $("#file_name").text(filename).removeAttr("style","color:red"); var feid=dom.id;//input框ID屬性 $.ajaxFileUpload({ fileElementId: feid, //需要上傳的檔案域的ID,即<input type="file">的ID。 url: bsurl + '/web/warning/generallyFile', //後臺方法的路徑 type: 'post', //當要提交自定義引數時,這個引數要設定成post dataType: 'json', //伺服器返回的資料型別。可以為xml,script,json,html。如果不填寫,jQuery會自動判斷。 secureuri: false, //是否啟用安全提交,預設為false。 async : true, //是否是非同步 success: function(data) { //提交成功後自動執行的處理函式,引數data就是伺服器返回的資料。 }, error: function(data, status, e) { //提交失敗自動執行的處理函式。 } }); }else{//格式不正確時給出提示 $("#file_name").text("請上傳字尾為doc或者docx的word文件").attr("style","color:red"); } } </script>
4、後臺程式碼我這裡是status2
https://pan.baidu.com/s/1bqj9RSrprivate String myFileContentType; private String myFileName; private File myFile; private String fileFileName; private String fileFileContentType; public String getFileFileContentType() { return fileFileContentType; } public void setFileFileContentType(String fileFileContentType) { this.fileFileContentType = fileFileContentType; } public String getFileFileName() { return fileFileName; } public void setFileFileName(String fileFileName) { this.fileFileName = fileFileName; } public String getMyFileContentType() { return myFileContentType; } public void setMyFileContentType(String myFileContentType) { this.myFileContentType = myFileContentType; } public String getMyFileName() { return myFileName; } public void setMyFileName(String myFileName) { this.myFileName = myFileName; } public File getMyFile() { return myFile; } public void setMyFile(File myFile) { this.myFile = myFile; } @Action("generallyFile") public String generallyFile(){ try { String text = ""; FileInputStream input = new FileInputStream(myFile); FileInputStream inputStream = new FileInputStream(myFile); byte[] b = new byte[10]; input.read(b, 0, b.length); String fileCode = bytesToHexString(b); input.close(); if("504b0304".equals(fileCode.substring(0,8))){//docx文字 XWPFDocument xdoc = new XWPFDocument(inputStream); POIXMLTextExtractor extractor = new XWPFWordExtractor(xdoc); text = extractor.getText(); }else if("d0cf11e0".equals(fileCode.substring(0,8))){//doc文字 WordExtractor wordExtractor = new WordExtractor(inputStream); text = wordExtractor.getText(); } inputStream.close(); if("".equals(text)||text==null) { text = "沒有提取到文件資訊,請嘗試手動複製。"; } setMsg(text); } catch (final Exception e) { } return "generallyFile"; }