使用ajax實現檔案上傳

https://blog.csdn.net/qq_42944520/article/details/84572509

記憶不太好,在這裡寫一寫利用ajax實現檔案上傳.方便以後檢視,正好和大家分享分享…
直接上程式碼吧!
html程式碼:

<input type="file" name="fileName1" id="fileName1"/>
<input type="button" onclick="sendToUser()" id="sendToUser" value="提交" />

• 1
• 2

js程式碼:

		function
 
 sendToUser(){ //在這裡進行ajax 檔案上傳 使用者的資訊 
			var $file1 = $("input[name='fileName1']").val();//使用者檔案內容(檔案)
			// 判斷檔案是否為空 
			if ($file1 == "") {
				alert("請選擇上傳的目標檔案! ")
				return false;
			}
			//判斷檔案型別,我這裡根據業務需求判斷的是Excel檔案
			var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase();
			if
 
(fileName1 != "xls" && fileName1 !="xlsx"){
              	alert("請選擇Execl檔案!");				
				return false;
			}
			//判斷檔案大小
			var size1 = $("input[name='fileName1']")[0].files[0].size;
			if (size1>104857600) {
				alert("上傳檔案不能大於100M!");
				return false;				
			}
		boo1 <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
	<span class="token keyword">var</span> type <span class="token operator">=</span> <span class="token string">"file"</span><span class="token punctuation">;</span>
	<span class="token keyword">var</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//這裡需要例項化一個FormData來進行檔案上傳</span>
	formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#fileName1"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token comment">//多檔案上傳在這裡繼續append</span>
	<span class="token comment">//eg : </span>
	<span class="token comment">//formData.append(type,$("#fileName1")[0].files[0]);</span>
	$<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
		type <span class="token punctuation">:</span> <span class="token string">"post"</span><span class="token punctuation">,</span>
		url <span class="token punctuation">:</span> <span class="token string">"uploadToFile"</span><span class="token punctuation">,</span>
		data <span class="token punctuation">:</span> formData<span class="token punctuation">,</span>
		processData <span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		contentType <span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		success <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token operator">==</span><span class="token string">"error"</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
				<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"檔案提交失敗!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
			<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input[name='userUrl']"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"檔案上傳成功!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42

使用springboot專案進行接收上傳檔案
controller層:

    /**
     * 上傳資料檔案
     *  多檔案上傳這裡使用 MultipartFile[] files接受即可
     * @author : lichenfei
     * @date : 2018年11月22日
     * @time : 下午2:46:29
     * @return @
     */
    @RequestMapping("/uploadToFile")
    @ResponseBody
    public String uploadToUser(@RequestParam("file") MultipartFile file, HttpServletRequest req, Model model) {
	String fileName = file.getOriginalFilename();
	if (fileName.indexOf("\\") != -1) {
	    fileName = fileName.substring(fileName.lastIndexOf("\\"));
	}
	// 獲取檔案存放地址
	String filePath = dataPath;
	File f = new File(filePath);
	if (!f.exists()) {
	    f.mkdirs();// 不存在路徑則進行建立
	}
	FileOutputStream out = null;
	try {
	    // 重新自定義檔案的名稱
	    Date date = new Date();
	    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
	    String d = sdf.format(date);// 時間
	    filePath = filePath + d + fileName;
	    out = new FileOutputStream(filePath);
	    out.write(file.getBytes());
	    out.flush();
	    out.close();
	} catch (Exception e) {
	    return "error";
	}
	return filePath; // 返回檔案地址
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

新人一枚,有什麼問題希望多多指導!