problem description
I created a simple file upload submission project. The server side uses the node, front end to integrate the upload form data using formdata, and the JQuery ajax submits the request to the back end.
on the node side, the form.parse of the multiparty module is used to parse the uploaded file, but in the callback files, of printing it, files is an empty object, but the file has been uploaded to the local specified directory successfully. Ask God for help!
related codes
/ / Please paste the code text below (do not replace the code with pictures)
html form:
<form action="" method="POST" enctype="multipart/form-data" id="form1">
<p class="diskName">
:<input type="text" name="diskName-CH"value=""></br>
<p class="l1">:
<select name="port" id="port">
<option value="android">Android</option>
<option value="pc">PC</option>
<option value="mac">Mac</option>
<option value="iphone">Iphone</option>
<option value="ipad">Ipad</option>
</select>
<p class="l2">
white.png:<input type="file" id="white" name="white" value="" />
gray.png:<input type="file" id="gray" name="gray" value="" />
1024.png:<input type="file" id="1024" name="1024" value="" />
<input type="button" value="" id="subPic">
</form>
JS section:
var $box=$("-sharpbox"),
$cloudName=$box.find(".diskName input"),//
$select=$box.find("select"),//select
$pic=$box.find("form .l2 input"),//
$subPic=$box.find("-sharpsubPic");//
$subPic.on("click",function(){
//
$name=$cloudName.val(),
$port=$select.val();
var pic1 = $pic.eq(0)[0].files[0],//white.png
pic2 = $pic.eq(1)[0].files[0],//gray.png
pic3 = $pic.eq(2)[0].files[0];//1024.png
//
if(!pic1&&!pic2&&!pic3){//picundefined
alert("");
return ;
}
//.png
//
var isPng=[];//isPng
for(var i=0;i<$pic.length;iPP)
{
if($pic.eq(i)[0].files[0]){
var index=$pic[i].value.lastIndexOf(".");
isPng.push($pic[i].value.substring(index));
}
}
console.log(isPng);
for(var key in isPng){
if(isPng[key]!=".png"){
alert("png");
return ;
}
}
var formData = new FormData();//
formData.append("name",$name);
formData.append("port",$port);
formData.append("file[]",pic1);
formData.append("file[]",pic2);
formData.append("file[]",pic3);//server
//ajaxnode server
$.ajax({
type: "POST",
url: "http://127.0.0.1:8080/uploadimgs",
data:formData,
dataType: "json", //json
//FormData
cache:false, //true
processData:false, //datafalse;trueFormDataString
contentType:false, //httpfalse
success: function(msg){
console.log(msg);
console.log("");
//alert("");
},
error:function(){
console.log("ajax");
}
});
});
server get files section:
//filesfieldsajax$name$port
form.parse(ctx.req,function(err,fields,files){
if(err){
send_json={
exception:"",
err:false
};
resolve(send_json);
// return send_json;
}else{
//files.fileundefined
console.log("files.file:"+files.file);
if(files!==undefined&&files!=={}&&files.file!==undefined){
console.log("files.upload.path:"+files.upload.path);
if(files.file.length>0){
let filename = files.file[0].path;
let filetype = files.file[0].headers["content-type"];
let realname = files.file[0].originalFilename;
console.log("filename = "+filename);
console.log("filetype = "+filetype);
console.log("realname = "+realname);
}
}else{
}
}
});
what result do you expect? What is the error message actually seen?
after getting the callback function files parameter of form.parse, the print type is Object, but when using for in to print its contents, it appears to be an empty object, so I print that files.file is undefined, and the parameter fields of form.parse is obtained successfully. But the file has been uploaded successfully, why can"t you get the files? Ask the boss to tell me how to solve it.
in addition, someone can tell me how to change the name of the picture file uploaded to the local directory when uploading. (Mengxin shivers ~ Boing) attach the picture uploaded to the directory: