2. 程式人生 > >jQuery-file-upload外掛的使用（小例項）

jQuery-file-upload外掛的使用（小例項）

阿新 • • 發佈：2019-02-02

關於檔案上傳的外掛網上有太多了。但是呢，做的特別好的，特別漂亮的上傳外掛對於IE低版本的相容性不好，甚至有的不支援。這裡我先說說jquery-file-upload這款外掛，相容性好。至於其他的上傳外掛，例如uploadify、swfupload、dropzone等，後期我會抽出時間，將我在專案中使用心得都寫出來。共同學習，有不足之處歡迎指正。

示例圖：
這裡寫圖片描述

1.首先是下載資源
（github上面寫的demo太亂，新手即使下載下來，也不知道如何跑的起來，這就是我寫這篇博文的原因。希望寫一個很簡單的例項，讓新手快速的掌握。但是我們所需的資源也可以從demo上下載，取我們需要的即可）
我自己整理的資源地址：

http://download.csdn.net/detail/itworktt/9617821
git下載地址：
https://github.com/blueimp/jQuery-File-Upload/
需要用到的下載資源清單：
js：
jquery-3.0.0.min.js：最好是最新版本
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
css：
jquery.fileupload.css
jquery.fileupload-ui.css

2.編寫例項
前臺頁面jsp：

<%--
  Created by IntelliJ IDEA.
  User: zz
  Date
 
: 2016/8/31
  Time: 9:02
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head
 
>
    <title>jquery file upload</title>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery-3.0.0.min.js"></script>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.ui.widget.js"></script>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.iframe-transport.js"></script>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.fileupload.js"></script>

  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload-ui.css">
  <style>
    .btn-success{display:inline-block; padding:0 0px;height:36px;background:#e7f1ff 6px center no-repeat;border-radius:5px;border:1px solid #89aede; line-height:35px;color:#3b83e1; font-weight:bold; cursor:pointer;text-align:center; min-width:100px; }
    .btn-success:hover{ background-color:#dbeafe;}

    .btn_blue{background-color: #E7F1FF;}
    .btn_blue:hover{ background-color: #89aede;}
    #center { padding-top: 100px }
  </style>
</head>
<body>
<div id="center" align="center">
        <%--<input id="fileId" type="file" name="file" data-url="${pageContext.request.contextPath}/uploadfile" multiple>--%>
        <%--<p></p>--%>
            <span class="btn btn-success fileinput-button">
                <span>選擇檔案</span>
                <input id="fileId" type="file"  name="file" multiple>
            </span>
        <div  id="files" class="btn_blue" style="width: 400px;height: 200px;"></div>
</div>
</body>


<script>
  (function(){
    $('#fileId').fileupload({
      url: '${pageContext.request.contextPath}/uploadfile',
      done: function (e, data) {
        alert('I love my girl friend-JOAN');
        $('#files').append(data.result.name+'<br>');
      },
      fail: function () {
        alert('出錯');
      }
    });
  })();
</script>

</html>

3.後臺接收
我這裡用的是springmvc，寫了一個controller。

 @RequestMapping("/uploadfile")
    @ResponseBody
    public Map jqueryUploadFile(MultipartFile file){
        System.out.println(file.getOriginalFilename());
        Map map=new HashMap();
        map.put("name",file.getOriginalFilename());
        return map;
    }

原始碼差不多就這樣了。如果以上程式碼拷貝之後跑不起來的童鞋，可以下方留言。

相關推薦

jQuery-file-upload外掛的使用（小例項）

關於檔案上傳的外掛網上有太多了。但是呢，做的特別好的，特別漂亮的上傳外掛對於IE低版本的相容性不好，甚至有的不支援。這裡我先說說jquery-file-upload這款外掛，相容性好。至於其他的上傳外掛，例如uploadify、swfupload、dropzon

前端之路：一款好用的的jQuery前端提示外掛（webui-popover）

  最近專案有點多，日記沒多少時間寫。哈哈。 今天介紹一款好用的提示控制元件  webui-popover 像popover（彈出框）這樣的外掛用處很廣，基本所有的社交網站都有。Bootstrap自帶的popover.js就實現了這個功能。但是在使用了幾天之

jQuery中togger總結（小疑問）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.mi

jQuery中選擇器（包含例項）

因為我查了一下，發現網上別人總結的確實也都不錯了，所以我下面主要是對選擇器的使用（其實主要還是為了督促自己多練習使用啦）jQuery中的選擇器，主要也就分為：基本選擇器、屬性選擇器、內容選擇器、過濾選擇器、子元素選擇器、表單元素選擇器等基本選擇器，也是我們用的最多的，我就不再

jquery file upload外掛動態修改url

jquery file-upload是一款特別好用的檔案上傳外掛，支援單檔案以及多檔案上傳，下面直接看程式碼： $('#fileupload').fileupload({url: xxxxx,auto

jQuery-File-Upload 使用筆記（一） 基礎外掛配置

公司專案有需要用到檔案的非同步上傳功能，最終決定使用jQuery-File-Upload這個外掛來完成功能。      下載外掛後，將資源加入到專案中（使用springmvc 完成後臺的關於檔

Jquery系列文章之開發外掛（11章）

   開發Jquery外掛    本章，我們簡紹 幾種不同外掛的開發方法，有簡單有複雜。首先，從新增新的全域性函式的外掛開始，然後再逐步討論各種形式的jquery物件方法。此外，還將討論以新表示式來擴充套件jquery選擇符引擎，最後在簡紹怎樣把

利用微信小程式（小遊戲）API製作適配cocos creator小遊戲排行榜的例項程式

cocos creator 可以通過新建一個creator專案進行新增子域專案，但是有一個缺點就是佔用檔案大小是一個問題，所以我這裡採用微信的API進行繪製排行榜， 主域就是各種傳送給子域的訊息，這裡不再這裡贅述，就是各種呼叫微信的API 這裡給出微信的API 微信開放資料域 新建m

C++設計模式-繼承與多型影響耦合性（最基礎的簡單工廠模式小例項）

繼承與多型影響耦合性（最基礎的簡單工廠模式小例項） 原理： 通過繼承和虛擬函式的方式修改某個子類對應函式的功能； 通過簡單工廠模式到底例項化誰; 如果要增加複雜的運算只有增加響應的子類，以及工廠的分支即可；   程式執行截圖如下：   目錄結構如

jQuery 關於ScrollableGridPlugin.js（固定表頭）外掛的逐步解析

1 /*! 2 * This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers. 3 */ 4 (function ($) { 5 /

jQuery-File-Upload 檔案上傳外掛

jQuery檔案上傳外掛 演示 引用 外掛地址 描述 檔案上傳小部件與多個檔案選擇，拖放支援，進度條，驗證和預覽影象，音訊和視訊的jQuery。支援跨域，分塊和可恢復的檔案上傳和客戶端影象調整大小。適用於任何支援標準HTML表單檔案上傳的伺服器端平臺（P

微信小程式圖片上傳（開發例項）

html部分 <!-- 圖片上傳 --> <view class='uploadimg'> <view class='uploadimgBox'> <block wx:for="{{imgs}}"

微信小程式tab導航+滾動頂部吸附效果（開發例項）

<!-- scroll導航欄 --> <view class='scrollBox2 fix-news' wx:if="{{fixTop<scrollTop}}"&g

微信小程式圖表外掛（wx-charts）

微信小程式圖表外掛（wx-charts）基於canvas繪製，體積小巧支援圖表型別餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪製，目前wx-charts是微信小程式圖表外掛中比較強大好使的一個。 wx-charts基於canvas繪製的微信小程式圖表外掛

JavaScript效能優化小竅門彙總（含例項）

在眾多語言中，JavaScript已經佔有重要的一席之地，利用JavaScript我們可以做很多事情 ， 應用廣泛。在web應用專案中，需要大量JavaScript的程式碼，將來也會越來越多。但是由於JavaScript是一個作為解釋執行的語言，而且它的單

一個簡單易懂且實用的JQuery分頁外掛（jquery.page）（詳解）

在你的.html檔案中引入相關的檔案： 注意:jquery.min.js需在你引入jquery.page.js之前引入。 <link rel="stylesheet" type="text/c

跟著例項學eclipse外掛開發--第二篇：類註釋外掛（程式碼輔助）

本文為大家講解org.eclipse.jdt.ui.javaCompletionProposalComputer擴充套件點。 在類名上，按智慧提示（alt+/），可以出來“類註釋”的程式碼輔助功能，可能我舉得這個例子意義不大，大家可以通過該擴充套件點做很多，對自己寫程式

JQuery輸入驗證外掛（使用layer的tips做提示）

重大更新          1.優化部分演算法          2.支援行內元素校驗定義          3.js新增元素，可新增定義事件                     內附詳細教程           日期：2018-9-18 --------

Spring-boot之jQuery File Upload後臺配置方法

文件上傳 query jquer highlight origin exc exist int alt 文件上傳在Spring-boot中本身配置起來非常簡單，但是有個多文件傳遞和單個傳遞的問題。 兩者配置是略有不同的,而且還有一些讓我這個技術小白很容易踩坑的地方。 重

用css實現文本不換行切超出限制時顯示省略號（小tips）

max 省略號 over 顯示 寬度 width code wid ellipsis div{ max-width: 500px; text-overflow: ellipsis; overflow: hidden; white-spac