首先在html页面添加一个添加按钮加上点击事件app();
- <input type="button" value="添加图片" onclick="app();" id="btnInsertImg" />
然后在 <script type="text/javascript">里写一个app()方法,这里写一个计数器使预览div的id每张图片都不同
- var imgIndex = 1;//计数器
- function app() {
- $("#imgContainer").append("<div><div style=\"margin-top:10px;\">" +
- "<input type=\"file\" name=\"file\" onchange=\"javascript:setImagePreview(this,"+imgIndex+");\"/>" +
- "<input type=\"button\" value=\"删除\" onclick=\"delfile(this)\" />" +
- "<input type=\"button\" value=\"上移\" onclick=\"up(this)\" />" +
- "<input type=\"button\" value=\"下移\" onclick=\"down(this)\" />" +
- "</div>"+
- "<div id=\"localImag_"+imgIndex+"\">"+
- "<img id=\"preview_" + imgIndex + "\" alt=\"\" />" +
- "</div></div>");
- imgIndex++;
- }
app()方法里用到setImagePreview(),这里注意要把计数器imgIndex传过来。
- function setImagePreview(obj, index) {
- var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
- if (obj.value == '') {
- $.messager.alert("让选择要上传的图片!");
- return false;
- }
- else {
- var localImagId = document.getElementById("localImag_" + index);
- var imgObjPreview = document.getElementById("preview_" + index);
- var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
- ////布尔型变量
- var isExists = false;
- //循环判断图片的格式是否正确
- for (var i in array) {
- if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
- //图片格式正确之后,根据浏览器的不同设置图片的大小
- if (obj.files && obj.files[0]) {
- //火狐下,直接设img属性
- imgObjPreview.style.display = 'block';
- imgObjPreview.style.width = '100px';
- imgObjPreview.style.height = '100px';
- //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
- imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
- }
- else {
- //IE下,使用滤镜
- obj.select();
- var imgSrc = document.selection.createRange().text;
- //必须设置初始大小
- localImagId.style.width = "100px";
- localImagId.style.height = "100px";
- //图片异常的捕捉,防止用户修改后缀来伪造图片
- try {
- localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
- localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
- }
- catch (e) {
- $.messager.alert("您上传的图片格式不正确,请重新选择!");
- return false;
- }
- imgObjPreview.style.display = 'none';
- document.selection.empty();
- }
- isExists = true;
- return true;
- }
- }
- if (isExists == false) {
- $.messager.alert("上传图片类型不正确!");
- return false;
- }
- return false;
- }
- }
删除,上移,下移方法
- function delfile(obj) {
- $(obj).parent().parent().remove();
- }
- function up(obj) {
- $(obj).parent().prev().before($(obj).parent());
- }
- function down(obj) {
- $(obj).parent().next().after($(obj).parent());
- }
效果图
点击添加图片
点击选择文件
添加多张