ajaxによるファイルアップロード
16730 ワード
記憶があまりよくなくて、ここでajaxを利用してファイルのアップロードを実現することを書きます.后で见て、ちょうどみんなと分かち合って...直接コードに行きましょう!htmlコード:
jsコード:
springbootプロジェクトを使用して、アップロードファイルcontrollerレイヤを受信します.
新人一枚、何か問題があったら指導してほしいです!
<input type="file" name="fileName1" id="fileName1"/>
<input type="button" onclick="sendToUser()" id="sendToUser" value=" " />
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 = true;
var type = "file";
var formData = new FormData();// FormData
formData.append(type,$("#fileName1")[0].files[0]);
$.ajax({
type : "post",
url : "uploadToFile",
data : formData,
processData : false,
contentType : false,
success : function(data){
if (data=="error") {
alert(" !");
}else{
$("input[name='userUrl']").val(data);
alert(" !");
}}
});
}
springbootプロジェクトを使用して、アップロードファイルcontrollerレイヤを受信します.
/**
*
*
* @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; //
}
新人一枚、何か問題があったら指導してほしいです!