使用FormData对象发送文件

以下是别人的例子：

多个例子可以做一下对比

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;
   }//生成随机数

使用FormData对象发送文件

猜你喜欢