首页 javascript

ajax 上传图片 FormData

发布时间:2016年05月23日 评论数：抢沙发 阅读数：4333

用ajax提交表单 如何去上传图片呢 代码如下：




$(document).ready(function(){
        $('#save').click(function(){
            var formData = new FormData();   //构造空对象，下面用append 方法赋值。  
            formData.append("file", $("#brand_pic")[0].files[0]); //处理文件对象
            formData.append("brand_id", $('#brand_id').val()); //表单正常的值
            // var data = new FormData($('form')[0]);  //也可以用这个来把所有表单内容提交 多图
            $.ajax({
                url:'/manage/brand/edit',
                type:'POST',
                data:formData,
                cache: false,
                /**   
                 * 必须false才会避开jQuery对 formdata 的默认处理   
                 * XMLHttpRequest会对 formdata 进行正确的处理   
                 */  
                processData : false,  
                /**   
                 *必须false才会自动加上正确的Content-Type   
                 */ 
                contentType: false,
                
                success:function(info){
                    if(info.code == 1){
                        alert(info.msg);
                        location.href=info.url;
                    }else{
                        alert(info.msg);
                    }
                }
            });


        });

注意事项










<form>标签添加enctype="multipart/form-data"属性。

cache设置为false，上传文件不需要缓存。

contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。