jQuery仿淘宝图片上传预览

 查看演示  website  立即下载

使用方法

1、引入js文件

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/upload.js"></script>

2、插件区域    

<div class="drop">
	<div id="drop_area"></div>
	<div id="drop_area2"></div>
	<div id="drop_area3"></div>
	<div id="drop_area4"></div>
</div>

3、绑定元素 

var dragImgUpload = new DragImgUpload("#drop_area",true,{
	callback:function (files) {
		//回调函数，可以传递给后台等等
		var file = files[0];
		console.log(file.name);
	}
})

4、图片上传方法

createImageUploadDialog:function () {
        var fileInput = this.fileInput;
        if (!fileInput) {
            //创建临时input元素
            fileInput = document.createElement('input');
            //设置input type为文件类型
            fileInput.type = 'file';
            //设置文件name
            fileInput.name = 'ime-images';
            //允许上传多个文件
            fileInput.multiple = true;
            fileInput.onchange  = this.onChangeUploadFile.bind(this);
            this.fileInput = fileInput;
        }
        //触发点击input点击事件，弹出选择文件对话框
        fileInput.click();
}

PREVIOUS:
NEXT:
原生Javascript的消息提示插件DreamMsg(原创)
js CPS在线测试