我在写jQuery接口上传文件的时候,遇到一个特头疼的问题,那就是上传图片,刚开始那我以为一个简单的form表单就搞定了,没想到写了两个小时都没写出来,心情那个烦躁啊,有一种想砸电脑的冲动,最后那我就用下面的方法实现了这个功能,突然发现好简单,分享给大家!废话不多说,直接上干货,代码走起。。。。

html代码段

<input type="file" name="photo" id="photo" value="" placeholder="免冠照片">
<input type="button" onclick="postData();" value="下一步" name="" style="width:100px;height:30px;">

jQuery代码段

<script type="text/javascript">
function postData(){
    var formData = new FormData();
    formData.append("photo",$("#photo")[0].files[0]);
    formData.append("service",'App.Passion.UploadFile');
    formData.append("token",token);
    $.ajax({
        url:'http://www.baidu.com/', /*接口域名地址*/
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
            console.log(res.data);
            if(res.data["code"]=="succ"){
                alert('成功');
            }else if(res.data["code"]=="err"){
                alert('失败');
            }else{
                console.log(res);
            }
        }
    })
}
<script>
    $(function(){
       $('.but').click(function(){
          data = new FormData($('#form1')[0]); 
          console.log(data);
         // $.post('up.php',{p:2},function(data){
         //    alert(data);
        //  })
           $.ajax({  
            url: 'up.php',  
            type: 'POST',  
            data: data,  
            dataType: 'JSON',  
            cache: false,  
            processData: false,  //不处理发送的数据,因为data值是FormData对象,不需要对数据做处理 
            contentType: false   //不设置Content-type请求头
        }).done(function(ret){  
           console.log(ret);
        });  
       })
    })
 </script>
END
本文作者:
文章标题:jQuery+ajax实现文件上传
本文地址:http://blog.imjunjun.cn/archives/130/
版权说明:若无注明,本文皆军军's Blog原创,转载请保留文章出处。
Last modification:May 1, 2022
如果觉得我的文章对你有用,请随意赞赏