jquery 上传图片方法

html:

 <input id="fileupload" type="file" class="form-control"  name="file"  >

js: 给input添加change事件

$("#fileupload").on("change",function(){
  var file = this.files[0];
    var data = new FormData();
        data.append("file", file);
        console.log(data);
        console.log(file);
        $.ajax({
            type: "post",
            url: " ",
            data: data,
            contentType: false,
            //默认文件类型application/x-www-form-urlencoded  设置之后multipart/form-data
            processData: false,
            // 默认情况下会对发送的数据转化为对象 不需要转化的信息
            success: function (res) {
                source = res.picAddr;
            },
        });
})

方法二：jQuery File Upload-jQuery上传图片插件使用

jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

  
<script src="assets/jquery/jquery.min.js"></script>
 <script src="assets/jquery-fileupload/jquery.ui.widget.js">
</script><script src="assets/jquery-fileupload/jquery.iframe-transport.js"></script> 
 <script src="assets/jquery-fileupload/jquery.fileupload.js"></script>

第三步 修改input格式

<input id="fileupload" 
        type="file"
        name="files[]" 
        data-url="server/php/" 
        multiple>

data-url为后台提供的ajax url；multiple为多文件上传，选填 ；

第三步 调用js代码 处理图片

$('#fileupload').fileupload({   
     dataType: 'json',      
  done: function (e, data) {     
       console.log(data);
            //data，为图片信息 ，在此处处理图片          
  });    
    }  
  });

以上为个人总结的jq图片插件地址 链接 www.jq22.com/jquery-info…