上传图片前不上传预览?

原创 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>

菜鸟学JS(一)——上传图片之上传前预览图片

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

上传图片(上传前预览)

非常荣幸能得到下面这段代码,实现了EXT中图片上传前的预览。可惜地址我没有保存。 下面这段代码可以直接在项目中使用xtype,记得require就行。效果如下: /** * Created by...
  • TUD2014
  • TUD2014
  • 2016年01月17日 17:27
  • 165

js实现图片文件上传预览 | 黄乔国PHP

普通的上传图片选择图片后并不知道自己选择的什么图片,那么通过js我们可以做出预览效果这样就知道选择的什么图片,以免误上传! js上传图片--预览图片 ...
  • miraclehw
  • miraclehw
  • 2017年09月07日 22:37
  • 332

ASP.NET MVC图片上传前预览

今年的学习计划是学好ASP.NET MVC和jQuery,多练习,不懂的去网上找或是多看书! 早上有练习图片上传前预览并获取图片文件名和图片字节大小。 在控制器中创建一个Action: ...
  • linybo
  • linybo
  • 2015年03月27日 14:07
  • 1517

上传文件前先预览图片的实现方法

1. js版本 function setImagePreview(docObj,localImag,imgObjPreviewId){ v...
  • ynwso
  • ynwso
  • 2015年05月26日 18:35
  • 627

PHP+HTML5+ajax 图片上传和图片预览

之前我用php来上传图片,通过submit来提交图片,我一直以为图片是不能用ajax上传的,群友告诉我可以用base64来上传图片,我搞不懂, 今天碰巧找到灵位一种上传图片的方式, 下面直接show代...
  • u014071104
  • u014071104
  • 2016年01月24日 14:41
  • 3967

js上传图片预览,php后台接收实例,已改写为多图上传预览

上传图片预览这个出自超实用的js代码段,关于图片的处理那一章,php后台接收是网上比较少这方面的资源或者写得很复杂,这里简单记录。都是基于js 首先先调用两个文件夹animateManage.js和v...
  • sinat_23900111
  • sinat_23900111
  • 2017年04月11日 17:51
  • 1401

java web 实现图片上传前的预览

要实现图片预览,我们必须限定上传的文件是图片文件。这个限制在上一篇有。如有不明白的,可以去看看。 实现预览我们可以用:jquery的相关功能实现。 1.在工程中加入JQuery的包。 2.在js...
  • cs19920
  • cs19920
  • 2013年12月23日 13:36
  • 2205

ajaxFileUpload实现图片的上传并预览

先来个最简单的  单图上传并预览 html: 引入js文件 头像 一个显示图片的标签,一个是文件上传的input标签(设置隐藏) js: ...
  • qq_31858333
  • qq_31858333
  • 2016年03月09日 09:40
  • 163

前端实现图片上传实时预览的两种方式

前端实现图片上传实时预览
  • u010670151
  • u010670151
  • 2016年05月03日 18:05
  • 6026
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:上传图片前不上传预览?
举报原因:
原因补充:

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