上传图片前不上传预览?

原创 2016年08月31日 10:50:08
<body>
<script type="text/javascript">
            //下面用于图片上传预览功能
            function setImagePreview(avalue) {
                var docObj = document.getElementById("doc");
                var imgObjPreview = document.getElementById("preview");
                var divs = document.getElementById("localImag");
                if (docObj.files && docObj.files[0]) {
                    //火狐下,直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '100px';
                    imgObjPreview.style.height = '100px';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
                   imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                } else {
                    //IE下,使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag");
                    //必须设置初始大小
                    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) {
                        alert("您上传的图片格式不正确,请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }
                return true;
            }
        </script>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td height="101" align="center">
                             <img id="preview" src="" width="100" height="100" style="display: block;border: 1px solid blue;" />
                    </td>
                </tr>
                <tr>
                    <td align="center" style="padding-top:10px;">
                    <form method="get" action="xznetwork" name="textfile">
                       <input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreview();">
                    </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>

SpringMVC批量上传图片,实现上传前图片预览

最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没做...

JS前端检测上传图片类型和属性大小,上传前预览图片

function checkImgType(){ var f = document.getElementById("file"); if(f.value==""){ ...

js实现上传图片--上传前预览图片

上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出...
  • nyxuem
  • nyxuem
  • 2015年04月10日 21:29
  • 302

java使用FileReader上传图片,可支持预览,支持多张上传

效果图: html代码: 上传照片:                                                                       如果需要查看原始尺...

上传图片,多图上传,预览功能,js原生无依赖

最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库...

实时预览上传图片(QQ上传头像前的预览)

上传到服务器之前的本地预览,提高响应速度,用户交互友好 function preview(file) { var prevDiv = document.getElementById('pre...

Html5上传图片前本地预览

  • 2014年04月10日 09:28
  • 72KB
  • 下载

JS上传图片前预览(兼容IE7)

  • 2010年06月22日 11:38
  • 2KB
  • 下载

上传图片,拿阿里云图片地址预览,调起剪切的jcrop插件获取宽高,剪切后再次上传阿里云

我的架构吧,前台easyui 后台 springmvc 有一些封装的就不贴了  只贴具体实现的代码 ...

在JSP上传图片前预览图片

  • 2010年03月16日 12:31
  • 719B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:上传图片前不上传预览?
举报原因:
原因补充:

(最多只允许输入30个字)