使用Ajaxfileupload外掛分別實現單檔案和多檔案上傳
一．Ajaxfileupload上傳檔案
首先頁面jsp程式碼：需要引入jquery和ajaxfileupload.js
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script
type="text/javascript" </head> <body> <input id="firstfile" type="file" name="firstfile"> <button onclick="upload()">上傳</button> <br /> <script type="text/javascript"> function upload() { $.ajaxFileUpload ({
url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFile' type:'post', secureuri: false, //是否需要安全協議，一般設定為false fileElementId: "firstfile", //檔案上傳域的ID data:{ "userId": 1 },//一同上傳的資料 dataType: 'json', //返回值型別一般設定為json success: function (data, status) //伺服器成功響應處理函式 { if(data>0){ alert("上傳成功"); }else{ alert("上傳失敗"); } } }) } </script> </body> |
服務端接收檔案（本例使用springmvc接收）：
|
@Controller @RequestMapping("/Upload") publicclass Upload { @RequestMapping(value = "/ToUploadFile", method = { RequestMethod.POST }) public@ResponseBody Integer ToUploadFile(@RequestParam("firstfile") MultipartFile firstfile, HttpServletRequest request, HttpServletResponse response) { try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); } response.setContentType("text/html;charset=utf-8"); response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Methods", "GET,POST"); // ------------------------------------------------------------------------------------------------------------ String originalFilename = null; try { if (firstfile.isEmpty()) { return 0; } else { originalFilename = firstfile.getOriginalFilename(); longsize = firstfile.getSize(); String contentType = firstfile.getContentType(); System.out.println("原始檔案全路徑名: " + originalFilename); System.out.println("檔案大小:" + size + "KB"); System.out.println("檔案型別:" + contentType); System.out.println("========================================"); } // ------------------------------------------------------------------------------------------------------------ /* * 1. 獲取專案的全路徑 */ String root = request.getServletContext().getRealPath("/WEB-INF/files"); String filename = firstfile.getOriginalFilename(); /* * 獲取檔名，最後一個"\"後面的名字 */ intindex = filename.lastIndexOf("\\"); if (index != -1) { filename = filename.substring(index + 1); } /* * 生成唯一的檔名 */ String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename; /* * 1. 根據檔名獲取hashcode */ inthCode = filename.hashCode(); // 將hashcode轉化為無符號整數基數為16的整數引數的字串 String hex = Integer.toHexString(hCode); /* * 2. 根據字串生成檔案目錄 */ File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1)); dirFile.mkdirs(); /* * 4. 生成檔案 */ File destFile = new File(dirFile, savename); String courseFile = destFile.getCanonicalPath(); // 將檔案儲存到伺服器相應的目錄位置 firstfile.transferTo(destFile); /////////////////////////////////////////////////////// } catch (Exception e) { e.printStackTrace(); return 0; } return 1; } } |
執行過程如下：
上傳檔案：
控制檯的列印：
伺服器路徑下儲存的檔案：
二．上述只能實現單檔案的上傳，下面順便實現一下多檔案同時上傳：
Ajaxfileupload.js外掛預設的都是單檔案上傳，所有要實現多檔案上傳需要改變原始碼：（需要注意的是修改js等靜態程式碼，再次執行的時候要清除伺服器的快取，不然還是用的之前的js導致無法多檔案上傳）
|
原來的程式碼： createUploadForm: function(id, fileElementId) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); var oldElement = $('#' + fileElementId); var newElement = $(oldElement).clone(); $(oldElement).attr('id', fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); //set attributes $(form).css('position', 'absolute'); $(form).css('top', '-1200px'); $(form).css('left', '-1200px'); $(form).appendTo('body'); return form; } 修改後： createUploadForm: function(id, fileElementId) { var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); if(typeof(fileElementId) == 'string'){ fileElementId = [fileElementId]; } for (var i in fileElementId) { var oldElement = $('#' + fileElementId[i]); var newElement = $(oldElement).clone(); $(oldElement).attr('id', fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); } //set attributes $(form).css('position', 'absolute'); $(form).css('top', '-1200px'); $(form).css('left', '-1200px'); $(form).appendTo('body'); return form; }, |
下面是前端程式碼：
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/ajaxfileupload.js"></script> </head> <body> <input id="firstfile" type="file" name="firstfile"> <button onclick="upload()">上傳</button> <br /> <input id="file1" type="file" name="files"> <input id="file2" type="file" name="files"> <input id="file3" type="file" name="files"> <button onclick="uploads()">多上傳</button> <script type="text/javascript"> function upload() { $.ajaxFileUpload ({ url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFile', //用於檔案上傳的伺服器端請求地址 type:'post', secureuri: false, //是否需要安全協議，一般設定為false fileElementId: "firstfile", //檔案上傳域的ID data:{ "userId": 1 },//一同上傳的資料 dataType: 'json', //返回值型別一般設定為json success: function (data, status) //伺服器成功響應處理函式 { if(data>0){ alert("上傳成功"); }else{ alert("上傳失敗"); } } }) } function uploads() { $.ajaxFileUpload ({ url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFiles', //用於檔案上傳的伺服器端請求地址 type:'post', secureuri: false, //是否需要安全協議，一般設定為false fileElementId: ['file1','file2','file3'], //檔案上傳域的ID data:{ "userId": 1 },//一同上傳的資料 dataType: 'json', //返回值型別一般設定為json success: function (data, status) //伺服器成功響應處理函式 { if(data>0){ alert("上傳成功"); }else{ alert("上傳失敗"); } } }) } </script> </body> |
伺服器端程式碼如下：
|
@RequestMapping(value = "/ToUploadFiles", method = { RequestMethod.POST }) public@ResponseBody Integer ToUploadFile2(@RequestParam("files") MultipartFile[] files, HttpServletRequest request, HttpServletResponse response) { if(files!=null&&files.length>0) { for(inti=0;i<files.length;i++) { MultipartFile file=files[i]; try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); } response.setContentType("text/html;charset=utf-8"); response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Methods", "GET,POST"); // ------------------------------------------------------------------------------------------------------------ String originalFilename = null; try { if (file.isEmpty()) { return 0; } else { originalFilename = file.getOriginalFilename(); longsize = file.getSize(); String contentType = file.getContentType(); System.out.println("原始檔案全路徑名: " + originalFilename); System.out.println("檔案大小:" + size + "KB"); System.out.println("檔案型別:" + contentType); System.out.println("========================================"); } // ------------------------------------------------------------------------------------------------------------ /* * 1. 獲取專案的全路徑 */ String root = request.getServletContext().getRealPath("/WEB-INF/files"); String filename = file.getOriginalFilename(); /* * 獲取檔名，最後一個"\"後面的名字 */ intindex = filename.lastIndexOf("\\"); if (index != -1) { filename = filename.substring(index + 1); } /* * 生成唯一的檔名 */ String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename; /* * 1. 根據檔名獲取hashcode */ inthCode = filename.hashCode(); // 將hashcode轉化為無符號整數基數為16的整數引數的字串 String hex = Integer.toHexString(hCode); /* * 2. 根據字串生成檔案目錄 */ File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1)); dirFile.mkdirs(); /* * 4. 生成檔案 */ File destFile = new File(dirFile, savename); String courseFile = destFile.getCanonicalPath(); // 將檔案儲存到伺服器相應的目錄位置 file.transferTo(destFile); /////////////////////////////////////////////////////// } catch (Exception e) { e.printStackTrace(); return 0; } } } return 1; } |
執行過程如下：
上傳三個檔案：
控制檯的列印：
伺服器路徑下的檔案：
相關推薦
使用Ajaxfileupload外掛分別實現單檔案和多檔案上傳
一．Ajaxfileupload上傳檔案 首先頁面jsp程式碼：需要引入jquery和ajaxfileupload.js <head> <meta http-equiv="Content-Type" content="text/html; charset
iOS 使用AFN 進行單圖和多圖上傳
圖片上傳時必要將圖片進行壓縮,不然會上傳失敗 1.單張圖上傳 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; [manager POST:urlStr
Java Servlet3.0使用getPart/getParts實現單檔案和多檔案上傳
一、使用工具： （1）Firefox瀏覽器 （2）Eclipse 二、實現單檔案上傳 （1）Servlet 原始碼 package com.servlet; import java.io.IOExce
springmvc 單檔案和多檔案上傳,控制上傳檔案的型別
package com.xiangshuai.controller; import java.io.File; import java.io.IOException; import javax.servlet.http.HttpServletRequest; impor
hadoop實現單表和多表關聯
補充一個單錶鏈接的例子： ublic class Single { private static class SingleMapper extends Mapper<LongWritable, Text, Text,
ASP.NET Core單檔案和多檔案上傳並儲存到服務端
前言： 在我們日常開發中，關於圖片，視訊，音訊，文件等相關檔案上傳並儲存到服務端中是非常常見的一個功能，今天主要是把自己在開發中常用的兩種方式記錄下來方便一下直接使用，並且希望能夠幫助到有需要的同學！ 一、配置ASP.NET Core中的靜態檔案： 簡單概述： 在ASP.NET Core應用中靜態資原
django 基於form表單上傳檔案和基於ajax上傳檔案
一、基於form表單上傳檔案 1、html裡是有一個input type="file" 和 ‘submit’的標籤 2、vies.py def fileupload(request): if request.method == 'POST': print(request.P
沒金幣了 簡潔的拍照和多圖上傳
一、匯入 httpmine-4.3.5.jar httpclient-4.3.5.jar 二、建立手機檔案目錄 將拍的照片路徑分成File新增到該目錄下 三、啟動系統相機 也可以自定義camera類對圖片進行處理 四、啟動子執行緒 生成客戶端傳送H
ajax FormData上傳檔案和資料，上傳進度條顯示
http://www.jb51.net/article/114003.htm 一、基於input 方式formData上傳檔案和資料： <divclass="startleft describebox"> <labelclass="title">商
用單進程、多線程並發、多線程分別實現爬一個或多個網站的所有鏈接，用瀏覽器打開所有鏈接並保存截圖 python
app imp mat 並發執行 cut h+ chrome 鏈接 目錄 #coding=utf-8import requestsimport re,os,time,ConfigParserfrom selenium import webdriverfrom multipr
Spring MVC - MultipartFile實現檔案上傳(單檔案與多檔案上傳)
前提：引入jar包。 <dependency>
c語言中實現超連結（多檔案程式的編譯和連線）
一個實用價值的c語言應用程式往往較大，需要劃分成不同的檔案，那麼如何把這些檔案編譯，連線成一個統一的可執行的檔案並執行呢？ c語言提供了編譯預處理“#include“檔名””來實現‘檔案包含”的操作，其特點是一個原始檔可以將另外一個原始檔的全部包含進來。預處理程式將#i
ThinkPHP遇到的問題:單檔案上傳和多檔案上傳
if($_FILES['pic']['tmp_name']){ $upload = new \Think\Upload();// 例項化上傳類 $upload->maxSize
js和jQuery分別實現 單選框、複選框、下拉列表的表單驗證
關於頁面表單驗證:一些簡單的理解單選框/複選框：js程式碼：$(function () { $("#Button").click(function () {var love = document.getElementsByName("love"); for(var i
線程學習--（六）單例和多線程、ThreadLocal
pen single cal final ride args ash public 線程 一、ThreadLocal 使用wait/notify方式實現的線程安全，性能將受到很大影響。解決方案是用空間換時間，不用鎖也能實現線程安全。 來看一個小例子，在線程內的set、get
Struts2單例和多例
text 屬性 用戶修改 出現 兩個 容器 pre min 得到 struts2中action是多例的，即一個session產生一個action如果是單例的話,若出現兩個用戶都修改一個對象的屬性值,則會因為用戶修改時間不同,兩個用戶訪問得到的屬性不一樣,操作得出的結果不一樣
使用C語言和Java分別實現冒泡排序和選擇排序
都沒有 img 容易 n) 不穩定排序 實現 imp 結果 輸出 經典排序算法——冒泡和選擇排序法 Java實現冒泡排序 基本思想是，對相鄰的元素進行兩兩比較，順序相反則進行交換，這樣，每一趟會將最小或最大的元素放到頂端，最終達到完全有序，首先看個動圖： 我們要清楚一點，
Ext.tree.Panel實現單選，多選
節點 stc head pro nbsp expand category animate 開啟 Extjs 1 var productCategoryTreeLookUpFn = function(callback) { 2 var produc
java單例和多例
單個 static 改變 cpu lazy pack out ont 通過 背景：最近在學習韓老師的筆記時候發現不是很了解單例和多例，於是通過網上查找資料的方式去學習。 設計模式：最佳的實踐，是軟件開發人員在軟件開發過程中面臨一般解決方案，也就是開發的經驗總結。 單例模式（
java中單例和多例的區別
單例 多例 區別 線程 1. 什麽是單例多例:所謂單例就是所有的請求都用一個對象來處理，比如我們常用的service和dao層的對象通常都是單例的，而多例則指每個請求用一個新的對象來處理，比如action; 2. 如何產生單例多例:在通用的SSH中，單例在spring中是默認的，如果要產生多例