首页 > 代码库 > jquery-file-upload demo

jquery-file-upload demo

2024-07-18 07:03:11   223人阅读

下载地址：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=http://www.mamicode.com/"<c:url value =http://www.mamicode.com/‘/resource/themes/bootstrap/css/bootstrap.min.css‘/>">    <link rel="stylesheet" href=http://www.mamicode.com/"<c:url value =http://www.mamicode.com/‘/resource/js/jQuery-File-Upload/css/jquery.fileupload.css‘/>">     <script src=http://www.mamicode.com/"<c:url value =http://www.mamicode.com/‘/resource/js/jquery-1.9.1.min.js‘/>"></script>    <script src=http://www.mamicode.com/" <c:url value =http://www.mamicode.com/‘/resource/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js‘/>"></script>    <script src=http://www.mamicode.com/" <c:url value =http://www.mamicode.com/‘/resource/js/jQuery-File-Upload/js/jquery.iframe-transport.js‘/>"></script>    <script src=http://www.mamicode.com/" <c:url value =http://www.mamicode.com/‘/resource/js/jQuery-File-Upload/js/jquery.fileupload.js‘/>"></script>    <script src=http://www.mamicode.com/"<c:url value =http://www.mamicode.com/‘/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=http://www.mamicode.com/"">    </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，哈哈

 


联系
我们