使用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
新人一枚,有什么问题希望多多指导!
