最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
用file标签实现多图文件上传预览
时间:2017-04-05 编辑:简简单单 来源:一聚教程网
js 代码:
代码如下 | 复制代码 |
//下面用于多图片上传预览功能 functionsetImagePreviews(avalue) { vardocObj = document.getElementById("files"); vardd = document.getElementById("preview"); dd.innerHTML =""; varfileList = docObj.files; for(vari = 0; i < fileList.length; i++) { dd.innerHTML +=" varimgObjPreview = document.getElementById("img"+i); if(docObj.files && docObj.files[i]) { //火狐下,直接设img属性 imgObjPreview.style.display ='block'; //控制缩略图大小 imgObjPreview.style.width ='70px'; imgObjPreview.style.height ='70px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); } else{ //IE下,使用滤镜 docObj.select(); varimgSrc = document.selection.createRange().text; alert(imgSrc) varlocalImagId = document.getElementById("img"+ i); //必须设置初始大小 localImagId.style.width ="70px"; localImagId.style.height ="70px"; //图片异常的捕捉,防止用户修改后缀来伪造图片 try{ localImagId.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch(e) { alert("您上传的图片格式不正确,请重新选择!"); returnfalse; } imgObjPreview.style.display ='none'; document.selection.empty(); } } returntrue; }
|
HTML代码:
代码如下 | 复制代码 |
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31