评论：jQuery图片上传预览支持拖拽  [查看原文]

onChangeUploadFile: function() {
   var fileInput = this.fileInput;
   var files = fileInput.files;
   var file = files[0];
   var _view_ = this;
   var fileObjs = $(fileInput)[0].files[0];
   var filePath = $(fileInput).val();
   var filename = file.name;
   var r = new FileReader(); //本地预览
   r.onload = function() {
       _view_.me.find("img").attr("src", r.result);
       _view_.me.find("img").attr("title", filename);
       if (_view_.callback) {
           _view_.callback(r.result);
       }
   };
   r.readAsDataURL(fileObjs);
},

墨染红尘0
2019/3/5 17:50:07
回答别人的提问，或者自己上传文件

墨染红尘0
2019/3/5 18:03:14
回答别人的提问，或者自己上传文件

哥是个传说0
2019/3/10 13:32:45
你帮助别人回答问题就可以了，我就是

往后余生0
2019/3/14 15:31:02
哦哦哦哦哦哦

友个人0
2019/3/15 14:40:02
难受

pangmy0
2019/3/23 14:24:01
我也给你回答

momo0
2019/3/28 18:37:02
难受

丶路西法0
2019/3/29 11:29:30
回答就能下载

小忧桑0
2019/4/2 13:29:29
回答就能下载了

紫气西来丶0
2019/4/2 19:31:31
回答就能下载了？

夏栖沐火0
2019/4/3 14:55:46
这个怎么弄啊

计科学院学生会工程部0
2019/4/7 18:03:03
回答别人的提问，或者自己上传文件

我是谁0
2019/4/8 11:31:16
我是回复信息

长路漫漫0
2019/4/8 14:59:14
尴尬

cmg19890
2019/4/12 16:19:35
尴尬

皇帝的新鞋0
2019/4/16 11:32:40
可以的

正能量 ?已认证??0
2019/4/17 15:57:59
哈哈

正能量 ?已认证??0
2019/4/17 18:28:03
回答也没有

Ta、0
2019/4/24 10:01:17
有buga

YJ.0
2019/10/16 15:36:06
真的假的

77?0
2020/4/3 8:49:53
试试回答

Jango Jing0
2020/5/10 21:30:49
回答你就可以了

Judy0
2024/2/24 15:32:10
回答别人的提问，或者自己上传文件

宅--生0
2019/3/16 0:45:43
好的好的

越路吹雪1
2019/3/19 11:36:26

不能选择同一张是因为input 已经有同一个file文件了，只需要把input的值清空即可。


createImageUploadDialog: function() {
    var fileInput = this.fileInput;
    if (!fileInput) {
        fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.name = 'ime-images';
        fileInput.multiple = true;
        fileInput.onchange = this.onChangeUploadFile.bind(this);
        this.fileInput = fileInput;
    }
    fileInput.value = ''; //这里清空input的值，即可解决选择同一文件无法触发回调的问题
    fileInput.click();
}

未满100岁的小女生~0
2019/4/8 13:38:12
回答问题等可以奖励jq 币

辉煌一世的咆哮i0
2019/4/17 20:32:27
我也是

倾听你的全世界??0
2019/4/18 18:43:05
我想来蹭蹭

下面我分享一下支持IE浏览器的base64编码写法：

onChangeUploadFile: function() {
    var fileInput = this.fileInput;
    var files = fileInput.files;
    var file = files[0];
    var _view_ = this;
    var fileObjs = $(fileInput)[0].files[0];
    var filePath = $(fileInput).val();
    var filename = file.name;
    var r = new FileReader(); //本地预览
    r.onload = function() {
        _view_.me.find("img").attr("src", r.result);
        _view_.me.find("img").attr("title", filename);
        if (_view_.callback) {
            _view_.callback(r.result);
        }
    };
    r.readAsDataURL(fileObjs);
},

代码的世界我不懂0
2019/4/3 9:38:48
大佬牛皮

感谢作者的分享，但是此插件不支持IE浏览器，所以我做了一下调整，就是将

window.URL.createObjectURL(file)

获取路径改为通过路径获取图片的base64编码来达到预览的效果。

??0
2019/3/21 9:29:02
应该是不会的

我是谁0
2019/4/8 11:32:27
回答别人的提问，或者自己上传文件

敏子0
2019/4/22 15:09:47
都试试看

倾听你的全世界??0
2019/4/18 18:45:20
俺也一样

代庆华0
2019/1/14 16:12:38
回答别人的提问，或者自己上传文件

鹿0可0
2019/1/15 14:29:45
一样呢

国0
2019/1/22 16:47:57
回答别人的提问，或者自己上传文件

☆?★说0
2019/2/28 15:00:15
回答别人的提问，或者自己上传文件

11110
2019/3/14 10:09:56
回答别人的提问，或者自己上传文件

国0
2019/1/22 16:53:55
回答别人的提问，或者自己上传文件

我要笑的没心没肺丶0
2019/9/27 10:09:25
回答别人的提问，或者自己上传文件

弗雷德0
2019/2/27 16:07:29

$("#fileinput").fileinput({
    uploadUrl: '/user/upload_img', // you must set a valid URL here else you will get an error
    language: 'zh',
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    maxFileSize: 10000,
    maxFilesNum: 3,
    minFileCount: 1,
    showCaption: false,
    ZoneEnabled: false,
    browseClass: "btn btn-danger",
    enctype: 'multipart/form-data'
});

On The Way!3
2019/2/28 11:17:51

1.在初始方法中 记录下id的信息，用来给后面input type=file 命名      

DragImgUpload(id,options){
this.me=$(id);
this.namef=id.substring(1);//去掉#号

2.在上传文件对话方法中 给生成的fileinput加name  

createImageUploadDialog:function(){ .... fileInput=document.createElement('input');
fileInput.type='file';
fileInput.name=this.namef;

3.上传图片后，把生成的file 添加到元素中，


onChangeUploadFile:function(){ .... this.me.remove('input');  
//这里删除是因为有可能重新上传图片
this.me.append(fileInput);

4.在页面样式中将 input设为隐藏的 不会影响界面的显示

On The Way!1
2019/2/28 11:20:53

这样就在前台界面上生成了一个

<input type="file" name=""/>

name和对应的div的id一一致，后台就考可以获取到上传的图片了

Taciturn knight0
2018/12/11 20:36:03
找个插件好难啊

_嘿嘿_1
2018/11/28 15:45:05

 //给你举个例子
var dragImgUpload = new DragImgUpload("#_area",{
      callback:function (files) {
          //回调函数，可以传递给后台等等
   var file = files[0];
   var formData = new FormData();
   formData.append("importFilePath",file );
   formData.append("folderId",file.name);
   formData.append("softType",file..type);
   if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name))
   {
       toastr["error"]($.i18n.prop("pictureType"))
       return false;
   }else{
       $.ajax({
           url: g_url_updateUserImg,
           type:'POST',
           contentType: false,
           processData: false,
           data: formData,
           success:function(data,textstatus){
               if(data.success==true){
                    //回台返回上传成功操作
               }else{
                   toastr["error"]($.i18n.prop("modifiedFailure"));
               }
           }
       });
   }
      }
})

灬嘲钟0
2018/12/4 14:21:12
上面的例子的formData没有东西怎么回事

草建树0
2019/1/25 10:27:49
对啊

On The Way!0
2019/2/28 11:23:37

1.在初始方法中 记录下id的信息，用来给后面input type=file 命名

DragImgUpload(id,options){
this.me=$(id);
this.namef=id.substring(1);//去掉#号

2.在上传文件对话方法中 给生成的fileinput加name

createImageUploadDialog:function(){ .... fileInput=document.createElement('input');
fileInput.type='file';
fileInput.name=this.namef;

3.上传图片后，把生成的file 添加到元素中，


onChangeUploadFile:function(){ .... this.me.remove('input'); //这里删除是因为有可能重新上传图片
this.me.append(fileInput);

4.在页面样式中将 input设为隐藏的 不会影响界面的显示
这样就在前台界面上生成了一个

<input type="file" name=""/>

name和对应的div的id一一致，后台就考可以获取到上传的图片了