標籤：style blog http color java io 檔案 for
：http://plugins.jquery.com/blueimp-file-upload/
文檔地址：https://github.com/blueimp/jQuery-File-Upload/wiki
本文只是一個demo,實現功能也很簡單：點擊一個上傳按鈕，使用者選擇圖片，圖片Ajax上傳到後台儲存到硬碟，返回一個串連，頁面上顯示使用者上傳的圖片。
（jquery-file-upload多檔案上傳可以做的非常漂亮，我這裡有點大材小用了）
註：demo 頁面為jsp，服務端為Java springMVC。
頁面代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head> <meta charset="UTF-8"> <title>file upload demo</title> <link rel="stylesheet" href="<c:url value =‘/resource/themes/bootstrap/css/bootstrap.min.css‘/>"> <link rel="stylesheet" href="<c:url value =‘/resource/js/jQuery-File-Upload/css/jquery.fileupload.css‘/>"> <script src="<c:url value =‘/resource/js/jquery-1.9.1.min.js‘/>"></script> <script src=" <c:url value =‘/resource/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js‘/>"></script> <script src=" <c:url value =‘/resource/js/jQuery-File-Upload/js/jquery.iframe-transport.js‘/>"></script> <script src=" <c:url value =‘/resource/js/jQuery-File-Upload/js/jquery.fileupload.js‘/>"></script> <script src="<c:url value =‘/resource/themes/bootstrap/js/bootstrap.min.js‘/>"></script> <script type="text/javascript"> $(function () { var url = "/portal/upload/uploadImg.do"; $(‘#fileupload‘).fileupload({ url: url, dataType: ‘text‘, done: function (e, data) { alert(1); console.dir(data); $(".imgView img").attr(‘src‘,‘${contextPath}‘+data.result); $("#progress").hide(); $(".imgView").show(); }, progressall: function (e, data) { console.dir(data); var progress = parseInt(data.loaded / data.total * 100, 10); $(‘#progress .progress-bar‘).css( ‘width‘, progress + ‘%‘ ); } }); }); </script></head><body> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Select file.</span> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="imgFile"/> </span> <br> <br> <!-- The global progress bar --> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> <div class="imgView" hidden="hidden"> <img src=""> </div> </body></html>
如果要自己寫css
那麼只需以下四個js:jquery.min.js、jquery.ui.widget.js、jquery.iframe-transport.js 、jquery.fileupload.js
配置：對id為fileupload 的file input 進行fileupload執行個體化，url即為圖片要上傳到服務端的後台連結，也可以通過html5的屬性 data-url 直接在input中給，input的name要給，貌似不能再配置中配，這個很不方便。progressall是配置進度條的，done是上傳到後台返回後的事件。
Java代碼：
import java.io.IOException;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.isoftstone.veco.common.base.controller.BaseController;import com.isoftstone.veco.common.upload.FileUploadHandler;@RequestMapping("/upload")@Controllerpublic class UploadController extends BaseController{ @RequestMapping("/uploadImg.do") public @ResponseBody String uploadMaterialImg(@RequestParam("imgFile") MultipartFile multipartFile) { String resp = null; if (multipartFile != null) { try { byte[] file = multipartFile.getBytes(); String dir = "/test"; String imgId = FileUploadHandler.uploadImg(file, dir); resp = FileUploadHandler.UPLOAD_CONFIG.getImgVirtualDir() + "?" + FileUploadHandler.UPLOAD_CONFIG.getDownloadParamName() + "=" + imgId; } catch (IOException e) { e.printStackTrace(); } } return resp; }}
try中間的上傳邏輯就不詳細寫了，controller這裡寫的有點挫，應該返回一個json格式的，判斷上傳是否成功，給使用者反饋的，不過我這裡只是一個demo，哈哈
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
