Ajax上传图片

假如想象 提交于 2019-12-03 16:48:54

上传图片input的类型是file (如下图)

<input type='file' name='xxx' id='pic_img'>

当我们选择图片文件时如下:

 判断是否为空如下:

if($('#pic_img').val() == ''){
    //为空
}else{
    //不为空
}

上传到后台之前要先加一个form把它包起来,并添加点击按钮上传 如下:

<form enctype="multipart/form-data" id="uploadForm">
      <input type='file' name='xxx' id='pic_img'>
      <input type='button' onclick='upload()' value='点击上传'>
 </form>

然后是js部分  通过ajax上传

function upload(){
    var formData = new FormData($("#uploadForm")[0])  //创建一个forData 
    formData.append('img', $('#pic_img')[0].files[0]) //把file添加进去  name命名为img
    $.ajax({
        url: /api/v1/xxxx,
        data: formData,
        type: "POST",
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
             //成功
        },
        error: function() {
              //失败
        }
      })
}

OK就这么简单,后台接收 name=img即可

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!