ajax异步上传图片代码案例

html代码如下：

<div class="form-group" style="width:60%;">

            <table class="table">
            <thead>
            <th width="60">图片</th>
            </thead>

            <tbody id="list">

<tr>

<td>

<a href="javascript:;" οnclick="uploadImg(this);">

<img src="" width="50px" height="50px" />

</a>

</td>

</tr>

</tbody>

            </table>

  </div>

<form id="upload_form" action="" method="post" enctype="multipart/form-data">
        <div style="display:none;">
        <input type="file" name="file" id="upload_pic" value="" />
        </div>
</form>

js:代码如下：

function uploadImg(_this){
    $("#upload_pic").click();
    //为文件上传添加change事件
  var fileM=document.querySelector("#upload_pic");
  $("#upload_pic").unbind ("change");//清除历史绑定
  $("#upload_pic").on("change",function(){
  //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
  var formData=new FormData();
  //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
  formData.append('file',fileM.files[0]);
$.ajax({
url:url,
type:"post",
data:formData,
contentType:false, //必须写
processData: false,//必须写
dataType:"json",
success:function(rsp){
if(rsp.state == 'SUCCESS'){
alert('上传成功！');
}else{
alert('上传失败！');
}
}
});
});
}