https://gti-amuse.com/js/DragImgUpload.js

1
2/*//初始化图片上传控件*/
3function Set_drop_SecImageModal(dropid, inputid, typeInt) {
4    var dragImgUpload = new DragImgUpload("#" + dropid, {
5        callback: function (files) {
6            //回调函数，可以传递给后台等等
7            var file = files[0];
8            createFormDataAndLoad(file, '/api/fileupload/uploadfileAsync', 'file', typeInt, inputid);
9        }
10    }, $("#" + inputid).val())
11}
12
13/*//input控件改变，对上传图片的控件里面的图片也改变*/
14function Update_drop_SecImageModalForImageSec(dropid, inputid) {
15    $("#" + dropid).children("#preview").children("img").attr("src", $("#" + inputid).val());
16    if ($("#" + inputid).val() == "") {
17        $("#" + dropid).children("#preview").children("img").attr("src", '/images/upload.png');
18    }
19}
20
21function del_drop_SecImageModal(dropid, inputid) {
22    $("#" + dropid).children("#preview").children("img").attr("src", '/images/upload.png');
23    $("#" + inputid).val("");
24
25}
26function DragImgUpload(id, options, Thumbnail) {
27    this.me = $(id);
28    var defaultOpt = {
29        boxWidth: '100%',
30        boxHeight: 'auto'
31    }
32    if (Thumbnail == "") {
33        this.preview = $('<div id="preview"><img src="/images/upload.png" class="img-responsive"  style="width: 100%;height: auto;" alt="" title=""> </div>');
34    }
35    else {
36        this.preview = $('<div id="preview"><img src="' + Thumbnail + '" class="img-responsive"  style="width: 100%;height: auto;" alt="" title=""> </div>');
37
38    }
39    this.opts = $.extend(true, defaultOpt, {
40    }, options);
41    this.init();
42    this.callback = this.opts.callback;
43}
44//定义原型方法
45DragImgUpload.prototype = {
46    init: function () {
47        this.me.append(this.preview);
48        this.me.append(this.fileupload);
49        this.cssInit();
50        this.eventClickInit();
51    },
52    cssInit: function () {
53        this.me.css({
54            'width': this.opts.boxWidth,
55            'height': this.opts.boxHeight,
56            'border': '0px solid #cccccc',
57            'padding': '10px',
58            'cursor': 'pointer'
59        })
60        this.preview.css({
61            'height': '100%',
62            'overflow': 'hidden'
63        })
64
65    },
66    onDragover: function (e) {
67        e.stopPropagation();
68        e.preventDefault();
69        e.dataTransfer.dropEffect = 'copy';
70    },
71    onDrop: function (e) {
72        var self = this;
73        e.stopPropagation();
74        e.preventDefault();
75        var fileList = e.dataTransfer.files; //获取文件对象
76        // do something upload
77        if (fileList.length == 0) {
78            return false;
79        }
80        //检测文件是不是图片
81        if (fileList[0].type.indexOf('image') === -1) {
82            alert("您拖的不是图片！");
83            return false;
84        }
85
86        //拖拉图片到浏览器，可以实现预览功能
87        var img = window.URL.createObjectURL(fileList[0]);
88        var filename = fileList[0].name; //图片名称
89        var filesize = Math.floor((fileList[0].size) / 1024);
90        if (filesize > 5000) {
91            alert("上传大小不能超过5000K.");
92            return false;
93        }
94
95        self.me.find("img").attr("src", img);
96        self.me.find("img").attr("title", filename);
97        if (this.callback) {
98            this.callback(fileList);
99        }
100    },
101    eventClickInit: function () {
102        var self = this;
103        this.me.unbind().click(function () {
104            self.createImageUploadDialog();
105        })
106        var dp = this.me[0];
107        dp.addEventListener('dragover', function (e) {
108            self.onDragover(e);
109        });
110        dp.addEventListener("drop", function (e) {
111            self.onDrop(e);
112        });
113
114
115    },
116    onChangeUploadFile: function () {
117        var fileInput = this.fileInput;
118        var files = fileInput.files;
119
120        if (files.length == 0) {
121            return false;
122        }
123        //检测文件是不是图片
124        if (files[0].type.indexOf('image') === -1) {
125            alert("您选择的不是图片！");
126            return false;
127        }
128        var file = files[0];
129        var img = window.URL.createObjectURL(file);
130        var filename = file.name;
131        this.me.find("img").attr("src", img);
132        this.me.find("img").attr("title", filename);
133        if (this.callback) {
134            this.callback(files);
135        }
136    },
137    createImageUploadDialog: function () {
138        var fileInput = this.fileInput;
139        if (!fileInput) {
140            //创建临时input元素
141            fileInput = document.createElement('input');
142            //设置input type为文件类型
143            fileInput.type = 'file';
144            //设置文件name
145            fileInput.name = 'ime-images';
146            //允许上传多个文件
147            fileInput.multiple = true;
148            fileInput.onchange = this.onChangeUploadFile.bind(this);
149            this.fileInput = fileInput;
150        }
151        //触发点击input点击事件，弹出选择文件对话框
152        fileInput.click();
153    }
154}
155
156
157function createFormDataAndLoad(image, actionUrl, ParameterName, upLoadFilePathType, urlinputid) {
158
159    var formImage = new FormData();
160    formImage.append(ParameterName, image);
161    formImage.append("upLoadFilePathType", upLoadFilePathType);
162    uploadFormData(formImage, actionUrl, urlinputid);
163}
164function uploadFormData(formData, actionUrl, urlinputid) {
165
166    //  upLoadFilePathType = 1  Article
167    //  upLoadFilePathType = 2 userInfo
168    abp.ui.setBusy(
169        null,
170        abp.ajax({
171            contentType: false,
172            url: actionUrl,
173            data: formData,
174            cache: false,
175            processData: false,
176        }).done(function (data) {
177            abp.notify.success('上传图片成功');
178            $("#" + urlinputid).val(data[0]);
179            //console.log($("#" + urlinputid).val());
180            //abp.notify.info('a message text', 'optional title');
181            //abp.notify.warn('a message text', 'optional title');
182            //abp.notify.error('a message text', 'optional title');
183        })
184    );
185
186}
187//上传图片结束