第一次寫博客，也不知怎么去寫，這次也算是一個(gè)開頭吧。之前也一直關(guān)注別人寫的博客，他們寫的挺好，我從中也收獲不少。

首先，對(duì)于編程，我并非科班出身。我本科學(xué)的是統(tǒng)計(jì)學(xué)，其實(shí)更確切的說是學(xué)數(shù)學(xué)的，因?yàn)槲覀兇蟛糠值恼n程是被數(shù)學(xué)占滿了?？赡苡行┤藭?huì)奇怪，統(tǒng)計(jì)學(xué)干嘛學(xué)那么數(shù)學(xué)。因?yàn)槲覍W(xué)的是數(shù)理統(tǒng)計(jì)，學(xué)校很深厚的數(shù)學(xué)功底，也因?yàn)檫@樣我才會(huì)轉(zhuǎn)行做軟件的。這次我分享的是用js實(shí)現(xiàn)文件上傳的功能，首先說明一下，此技術(shù)并非都是我原創(chuàng)，我是阿發(fā)你好課程的基礎(chǔ)上改編的，他原創(chuàng)的沒有圖片預(yù)覽的功能，我在他的基礎(chǔ)上增加圖片預(yù)覽的功能。順便給發(fā)哥打一下廣告，他的課程真心不錯(cuò)，我在他那里學(xué)到很多原理上的東西，這是他的官方網(wǎng)址http://afanihao.cn/我只負(fù)責(zé)推薦，學(xué)不學(xué)看你自己。

好了廢話不多說了，直接上代碼吧，所有思路代碼都有注釋。

一、前端HTML部分

<div class='main'><input type='file' class='filebutton' style='display:none' οnchange='fileSelected()' /> <br><button class="upload" οnclick='openFileDialog()' > 選擇文件上傳 </button><div class="img"></div></div>

二、js部分

//點(diǎn)擊普通按鈕,打開文件選擇框function openFileDialog(){$(".filebutton").click();}//選擇一個(gè)文件時(shí)onchange時(shí)間被觸發(fā)function fileSelected(){var fbutton = $(".filebutton")[0];//dom元素//讀取文件var reader = new FileReader();reader.onload = function(e){var dataURL = e.target.result;//'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...' //alert(data);var htmlImg = "<img src = '" + dataURL + "'/>";$(".img").html(htmlImg);}var file = fbutton.files[0];reader.readAsDataURL(file);startFileUpload(file); }//開始上傳function startFileUpload(file){var uploadURL = "FileUploadServer";//手工構(gòu)造一個(gè)form對(duì)象var formData = new FormData();formData.append("file" , file);// 'file' 為HTTP Post里的字段名, file 對(duì)瀏覽器里的File對(duì)象//手工構(gòu)造一個(gè)請(qǐng)求對(duì)象，用這個(gè)對(duì)象發(fā)送表單數(shù)據(jù)//設(shè)置 progress, load, error, abort 4個(gè)事件處理器var request = new XMLHttpRequest();request.upload.addEventListener("progress" , window.evt_upload_progress , false);request.addEventListener("load", window.evt_upload_complete, false);request.addEventListener("error", window.evt_upload_failed, false);request.addEventListener("abort", window.evt_upload_cancel, false); request.open("POST", uploadURL ); // 設(shè)置服務(wù)URLrequest.send(formData); // 發(fā)送表單數(shù)據(jù)}window.evt_upload_progress = function(evt){if(evt.lengthComputable){var progress = Math.round(evt.loaded * 100 / evt.total);console.log("上傳進(jìn)度" + progress);}};window.evt_upload_complete = function (evt){if(evt.loaded == 0){console.log ("上傳失敗!");}else{console.log ("上傳完成!");var response = JSON.parse(evt.target.responseText);console.log (response);} }; window.evt_upload_failed = function (evt) { console.log ("上傳出錯(cuò)"); };window.evt_upload_cancel = function (evt) {console.log( "上傳中止!"); };

三、后端部分，需要兩個(gè)jar包的支持，他們分別是：commons-fileupload-1.3.1.jar? ?commons-io-2.4.jar

package my.fileUpload;import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.PrintWriter; import java.text.SimpleDateFormat; import java.util.Date; import java.util.UUID;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItemIterator; import org.apache.commons.fileupload.FileItemStream; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.apache.commons.fileupload.util.Streams; import org.json.JSONObject;public class FileUploadServer extends HttpServlet {File tmpDir;//文件保存的臨時(shí)目錄@Overridepublic void init() throws ServletException {System.out.println("初始化");File webRoot = new File(getServletContext().getRealPath("/"));tmpDir = new File(webRoot , "upload");if(!tmpDir.exists()) tmpDir.mkdirs();}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request , response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("進(jìn)入");int error = 0;String reason = "OK";String data = null;try {data = doUpload(request , response);} catch (Exception e) {error = -1;reason = e.getMessage();// TODO Auto-generated catch blocke.printStackTrace();}JSONObject jreq = new JSONObject();jreq.put("error", error);jreq.put("reason", reason);if(data != null) jreq.put("data", data);response.setCharacterEncoding("utf-8");response.setContentType("text/plain");PrintWriter out = response.getWriter();out.write(jreq.toString(2));}private String doUpload(HttpServletRequest request, HttpServletResponse response) throws Exception{String result = null;boolean isMultipart = ServletFileUpload.isMultipartContent(request);if(!isMultipart)throw new Exception("請(qǐng)求編碼必須為: multipart/form-data !");request.setCharacterEncoding("utf-8");ServletFileUpload upload = new ServletFileUpload();FileItemIterator iter = upload.getItemIterator(request);while(iter.hasNext()){//表單域FileItemStream item = iter.next();String fieldName = item.getFieldName();InputStream fieldStream = item.openStream();if(item.isFormField()){//普通表單域直接讀取String fieldValue = Streams.asString(fieldStream , "utf-8");System.out.println("表單域:" + fieldName + "=" + fieldValue); }else{String realName = item.getName();//原始文件名//文件的后綴名String suffix = realName.substring(realName.lastIndexOf(".")+1);System.out.println("文件名：" + realName + "....." + "后綴名：" + suffix);//創(chuàng)建已個(gè)臨時(shí)文件名String s = UUID.randomUUID().toString();String s2 = s.substring(0,8)+s.substring(9,13)+s.substring(14,18)+s.substring(19,23)+s.substring(24); s2 = s2.toUpperCase();SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd-HHmmss");String dateStr = sdf.format(new Date());String fileName = dateStr +"-" + s2 + "." + suffix;result = fileName;System.out.println("文件名：" + fileName);File file = new File(tmpDir , fileName);long fileSsize = 0;//文件大小System.out.println("===========文件開始上傳=============");//從FieldStream讀取數(shù)據(jù)，保存到目標(biāo)文件file.getParentFile().mkdirs();FileOutputStream fileStream = new FileOutputStream(file);try{byte[] buf = new byte[1024];while(true){int n = fieldStream.read(buf);if(n < 0) break;if(n == 0) continue;fileStream.write(buf, 0, n);fileSsize += n;}}finally{fileStream.close();fieldStream.close();}System.out.println("上傳完成！");}}return result;}}

最后再說一下，代碼會(huì)很多需要改進(jìn)的地方，歡迎各位同僚給出意見，謝謝！

總結(jié)

以上是生活随笔為你收集整理的利用js实现文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。