以下是别人的例子:
多个例子可以做一下对比
1:
HTML部分
<form action="">
<label for="">
姓名: <input type="text" name="name">
</label>
<label for="">
文件:<input id="file" type="file" name="file">
</label>
<label for="">
<input type="button" value="保存">
</label>
</form>
JS部分
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
// 文件元素
var file = document.querySelector('[type=file]');
// 通过FormData将文件转成二进制数据
var formData = new FormData();
// 将文件转二进制
*****注意2******
formData.append('upload', file.files[0]);
*****注意1******
var xhr = new XMLHttpRequest;
xhr.open('post', 'file.php');
// 监听上传进度
xhr.upload.onprogress = function (ev) {
// 事件对象
// console.log(ev);
var percent = (ev.loaded / ev.total) * 100 + '%';
console.log(percent);
progress.style.width = percent;
}
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
//
}
}
}
注意1:使用jQuery
$.ajax({
url: 'file.php',
type: 'POST',
data: formdata, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success:function (data) { //成功回调
console.log(data);
}
});
注意2:参数
new FormData的参数是一个DOM对象,而非jQuery对象
var formData = new FormData($("#file")[0]);
2:
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>File to stash:</label>
<input type="file" name="file" required />
<input type="submit" value="Stash the file!" />
</form>
<div></div>
然后使用下面的代码发送请求:
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
var oOutput = document.querySelector("div"),
oData = new FormData(form);
oData.append("CustomField", "This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST", "stash.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
}
};
oReq.send(oData);
ev.preventDefault();
}, false);
下面是我自己写的例子(图片和数据分开发给后台):
<form id="myform" method="post" action="" enctype="multipart/form-data"> <table cellpadding="0" cellspacing="0" class="frame_form" width="100%"> <tr> <th width="80">广告名称</th> <td><input type="text" class="input fl" value="" name="name" size="20" /></td> </tr> <tr> <th width="80">广告现图</th> <td><img src="" style="width:300px;height:80px;" class="view_msg"></td> </tr> <tr> <th width="80">广告图片</th> <td><input type="file" id="pic" accept="image/png,image/jpeg,image/gif" value="" class="input fl" name="pic" style="width:200px;" /></td> <td><input type="hidden" id="pic1" value="" name="img" style="width:200px;"/></td> </tr> </table> <div class="btn"> <td colspan="2" class="aui_footer"> <div class="aui_buttons"> <button id="edit" class="aui_state_highlight" type="submit" onclick="up()">编辑</button> <button id="close" type="button">关闭</button> </div> </td> </div> </form>
js代码 如下:
function up() { $("#myform").submit(function (e) { e.preventDefault();//阻止表单默认行为 $.ajax({ url:"/admin/adver_edit/", type:"post", dataType:"json", data:$("#myform").serialize(),//表单序列化发送除图片外的数据 success:function(msg){ console.log(msg); //成功后的处理程序 }, error:function(xhr,textstatus,thrown){ } }); });//表单提交 }
图片重命名及上传的js代码:
Date.parse(new Date())//时间戳
$("#pic").change(function () { if($(this).val() != ""){ var tmpPath = $("#pic").val(); tmpPath=tmpPath.split(".")[1]; var new_name=get_file_name(2);//调用函数生成随机数 $("#pic1").val(new_name+Date.parse(new Date())+"."+tmpPath);//tmpPath为图片后缀名 var formData=new FormData(); var img_file=document.getElementById("pic"); var fileObj=img_file.files[0]; //上面三句获取到图片对象 formData.append('file',fileObj); formData.append('filename',$("#pic1").val()); $.ajax({ url: "/admin/image_upload/", type: "post", dataType: "json", data:formData, processData : false, contentType : false, async:false, success:function () { } }); } });//点击上传图片生成随机图片名 function get_file_name(len) { let new_file_name = 'A'; let chars = "1234567890qwertyuiopasdfghjklzxcvbnm"; for (i = 0; i < len; i++) { new_file_name += chars[parseInt(Math.random() * chars.length)]; } return new_file_name; }//生成随机数