这种上传图片的效果怎么做?
自己写,用FormDate
设计稿做的挺好,我借鉴一下,谢啦.
正好我们的项目也需要用到图片上传组件,
刚刚写了一个,还在优化,仅供参考,欢迎提出优化方案。
// 上传组件
function UpDataFile(el, options) {
this.element = el;
this.options = $.extend({
url: null, // 接收路径
success: function() {}, // 上传成功的回调函数
error: function() {} // 上传失败的回调函数
}, options);
this.formData = new FormData(); // 创建表单数据实例
this.createDom();
this.events();
}
UpDataFile.prototype = {
// 上传
upData: function() {
var that = this;
$.ajax({
url: this.options.url,
type: 'POST',
cache: false,
data: this.formData,
processData: false,
contentType: false,
success: function(data) {
that.success.call(that, data);
that.options.success.call(that, data);
},
error: function(data) {
that.error.call(that, data);
that.options.error.call(that, data);
}
});
},
// 创建上传组件
createDom: function() {
this.fileEl = $('<div class="cy-file"><ul class="cy-file-list"></ul><a class="cy-file-btn" href="javascript:;"><span>上传文件</span></a></div>');
this.element.after(this.fileEl);
},
// 上传成功
success: function() {
this.options.success.bind(this);
},
// 上传失败
error: function() {
this.options.error.bind(this);
},
// 渲染图片
render: function() {
},
// 添加文件
addFile: function() {
this.element.trigger('click');
},
// 事件处理
events: function() {
var that = this;
this.fileEl.on('click', '.cy-file-btn', this.addFile.bind(this));
this.element.on('change', function() {
[].map.call($(this)[0].files, function(i) {
that.formData.append('updatafile', i);
});
that.upData();
});
}
};