IE火狐谷歌等主流浏览器--图片上传预览

最新推荐文章于 2024-04-20 13:50:15 发布
最新推荐文章于 2024-04-20 13:50:15 发布
阅读量4.2k 收藏
点赞数
分类专栏： 实用知识点 文章标签： 浏览器 ie class function input javascript 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>兼容IE火狐等主流浏览器，图片上传简单JS预览</title>

    <script>
    function checkPic(){
        var picPath=document.getElementById("picPath").value;
        var type=picPath.substring(picPath.lastIndexOf(".")+1,picPath.length).toLowerCase();
        alert(type);
        if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){
            resetFile();//清空file控件内容
            alert("请上传正确的图片格式111");
            return false;
        }
        document.getElementById("Preview").style.display="block";
        return true;
    }

    //图片预览
function PreviewImage(divImage,upload,width,height) {  
        if(checkPic()){
            try{
                var imgPath;
                //图片路径     
var Browser_Agent=navigator.userAgent;
                //判断浏览器的类型   
if(Browser_Agent.indexOf("Firefox")!=-1){
                    //火狐浏览器
                    imgPath =window.URL.createObjectURL(upload.files[0]);  
					alert(imgPath);					
                    document.getElementById(divImage).innerHTML ="<img id='imgPreview' src='"+imgPath+"' width='"+width+"' height='"+height+"'/>";
                }else{
                    //IE浏览器
                    var Preview = document.getElementById(divImage);
                    Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
                    Preview.style.width = width;
                    Preview.style.height = height;
                }  
            }catch(e){
                resetFile();//清空file控件内容
                alert(e);
                alert("请上传正确的图片格式");
            }
        }
    }
    
    /*以下代码主要用来当用户选择了非指定类型图片时清空上传控件的值*/
    var html=document.getElementById("resetFile").innerHTML;
    function resetFile(){
        document.getElementById("Preview").style.display="none";//隐藏显示选中图片的层
        document.getElementById("resetFile").innerHTML=html; //清空file控件
    }
    </script>

</head>
<body>
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                选择图片：
            </td>
            <td id="resetFile">
                <input type="file" id="picPath" name="pic_path" οnchange="PreviewImage('Preview',this,100,90);"
                    style="width: 265px"/>
                  
                <input type="submit" value=" 保   存 "/>
                <font color="red">只允许上传  jpg  |  gif  |  png  格式图片</font>
            </td>
        </tr>
        <tr>
            <td>
                图片预览：
            </td>
            <td style="text-align: left;">
                <div id="Preview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);">
                </div>
            </td>
        </tr>
    </table>
</body>

<script language="javascript" type="text/javascript" src="$path/datePicker/WdatePicker.js" ></script>   
<script type="text/javascript">

   function validate()
   {
       var addForm=document.getElementById("addForm");
       addForm.action="$path/book/booAction!booAdd.do";
       addForm.submit();
   }
   </script>
#set($JQ="$.")
<link rel="stylesheet" type="text/css" href="$path/css/input.css" />
<script src="${path}/js/jquery.js" type="text/javascript"></script>
<script src='$path/js/jquery.metadata.js' type='text/javascript'></script>
<script src='$path/js/input1.js' type='text/javascript'></script>
<script src='$path/js/jquery.validate.js' type='text/javascript'></script>
<script src="$path/js/jquery.validate.cn.js" type="text/javascript"></script>
<script type="text/javascript" src="$path/js/jquery.livequery.js"></script>
<script type="text/javascript" src="$path/js/jquery.tools.js"></script>

<script type="text/javascript">
##单张图片上传 可引用
    function clearFile()
      {
            var oldFile = document.getElementById("picture");
            var newFile = document.createElement("input");
            newFile.id = oldFile.id;
            newFile.name = oldFile.name;
            newFile.type = "file";
            oldFile.parentNode.replaceChild(newFile, oldFile);
     }
        
    ## 显示图片预览操作层
    $(".productImageArea li").livequery("mouseover", function() {
        $(this).find(".productImageOperate").show();
    });
    
    ## 隐藏图片预览操作层
    $(".productImageArea li").livequery("mouseout", function() {
        $(this).find(".productImageOperate").hide();
    });
      
    ## 图片删除
    $(".delete").livequery("click", function() {
        document.getElementById("picture").contenteditable="ture";
        clearFile();
        var $productImageLi = $(this).parent().parent().parent();
        var $productImagePreview = $productImageLi.find(".productImagePreview");
        var $productImageOperate = $productImageLi.find(".productImageOperate");
        var $imageParameterTypes = $productImageLi.find("input[name='imageParameterTypes']");
        $productImageOperate.remove();
        $imageParameterTypes.val("delete");
         var html="暂无图片";
        $productImagePreview.html(html);
        $productImagePreview.removeAttr("title");
        if(${JQ}browser.msie) {
            if(window.XMLHttpRequest) {
                $productImagePreview[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = 'scale', src='')";
            }
        }
    });
        
    ## 图片选择预览
    var $productImageScrollable = $(".productImageArea .scrollable").scrollable();

    $(".productImageUploadButton input").livequery("change", function() {
        ##var $this = $(this);
        
        var $productImageLi = $(this).parent().parent().parent();
        var $productImagePreview = $productImageLi.find(".productImagePreview");
        var index=$(this).val().lastIndexOf('\\')+1;
        
            
        var fileName = $(this).val().substr(index);
            
        ##图片格式限制
        if (/(.jpg|.jpeg|.png)$/i.test($(this).val()) == false)
        {
           $("#picture").after($("#picture").clone().val(""));
           $("#picture").remove();
            ${JQ}message("图片上传格式错误");
            return false;
        }
        $productImagePreview.empty();
        $productImagePreview.attr("title", fileName);
        if (${JQ}browser.msie)
        {
        ##IE进入这个里面
            if(!window.XMLHttpRequest)
            {
                <!--  <img src="+ $this.val() + " />　-->
                $productImagePreview.html('&lt;img src="+ $(this).val() + " /&lt;');
            }
            else
            {
            ##IE进入这个里面
                $(this)[0].select();
                var imgSrc = document.selection.createRange().text;
                $productImagePreview[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = 'scale', src='" + imgSrc + "')";
            }
        }
        else if (${JQ}browser.mozilla)
        {
        ##火狐进入这个里面
                var docObj=document.getElementById("picture");
                var imgurl=window.URL.createObjectURL(docObj.files[0]);
                document.getElementById("preview").innerHTML ="<img id='imgPreview' src='"+imgurl+"' width='"+80+"' height='"+80+"'/>";
        }
        else
        {
        alert("谷歌");
        ##谷歌进这个里面
           var docObj=document.getElementById("picture");
           var imgurl= window.webkitURL.createObjectURL(docObj.files[0]);
           alert(imgurl);
            document.getElementById("preview").innerHTML ="<img id='imgPreview' src='"+imgurl+"' width='"+80+"' height='"+80+"'/>";
        }
        ##图片加一个删除层
        var operateHtml = '<input type="hidden" name="fileName" value="'+fileName+'" /><div class="productImageOperate"><a class="delete" href="javascript: void(0);" title="删除" hidefocus="true"></a></div>';
        var productImageLiHtml = '<li name="item" id="item"><div class="productImageBox"><div class="productImagePreview">暂无图片</div></div></li>';
        $(operateHtml).insertAfter($productImagePreview);

    });
</script>

## 内容 start
<div id="rightwrap">
   <div style="display:block" class="tabContent">


<div id="content" align="center" style="width:100%;height:400px" >

<form id="addForm" name="addForm" method="post" action="" enctype="multipart/form-data">

    <h2 align="center">图书添加        </h2>
         <table  border="0" cellspacing="1" cellpadding="0" style="padding-top:10px;" class="table ">
         <table align="center" height="80%" width="60%" border="1" cellpadding="0" cellspacing="0" style="padding-top:10px;" class="table ">
           <tr height="10px" >
            <td align="right" >书号：</td>
            <td>${ronBookId}
            <input type="hidden" id="bookId" name="extbook.bookId" value=${ronBookId} /></td>
        
        
            <td align="right">图书数量：</td>
            <td><input type="text" id="bookCount" name="extbook.bookCount" value="" /> </td>
           </tr>
           <tr height="20px" >
            <td align="right" >书名：</td>            
            <td><input type="text" id="bookName" name="extbook.bookName" value="" />   <font color="red">*</font> </td>
            <td align="right">图书价格：</td>
            <td><input type="text" id="bookCount" name="extbook.price2" value="" />    </font></td>
           </tr>
           <tr height="20px" >
            <td align="right">作者： </td>
            <td><input type="text" id="writer" name="extbook.writer" value="" /> </td>
            <td align="right">图书类别：</td>
            <td>
                <select name="extbook.typeId">
                #foreach($list in ${typeList})
                <option value=$!list.id>$!list.name</option>
                #end
                </select>    
            </td>
           </tr>
           <tr  height="20px" >
            <td align="right">出版社：</td>
            <td><input type="text" id="publish" name="extbook.publish" value="" /></font></td>
            <td align="right">是否推荐： </td>
            <td>
                <select name="extbook.isNew">
                <option value="1">推荐</option>
                <option value="0">不推荐</option>
                </select>
            </td>
           </tr>
           <tr  height="20px" >
            <td align="right">出版时间：</td>
            <td><input type="text" id="publishtime" name="extbook.publishTime2" size="10px" onClick="WdatePicker()" value="$!date.format('yyyy-MM-dd',${extbook.publishTime2})" readonly="true"/></td>
            <td align="right">图书图片：</td>
            <td>
                
                <div class="productImageArea">
                    <div class="scrollable">
                        <div style="float:left;margin-left:5px;display:inline;">
                            <a class="productImageUploadButton" href="javascript: void(0);" >
                               <input type="file" name="picture" id="picture"  contenteditable="false"/>
                            </a>
                         </div>
                        <li name="item" id="item" style="float:left;margin:10px 0 0 10px;">
                            <input type="hidden" name="imageParameterTypes" value="productImageFile" />
                            <div class="productImageBox">
                                <div class="productImagePreview png" id="preview">
                                    暂无图片
                                </div>
                            </div>
                        </li>
                    </div>
                    <div class="blank"></div>
                    <span class="warnInfo" style="float:left;margin-left:5px;display:inline;">
                        <span class="icon">&nbsp;</span>
                          小于1M(*.jpg;*.jpeg;*.png)
                    </span>
                </div>
            </td>
           </tr>
           <tr height="20px" >
            <td align="right">内容简介：</td>
            <td><input type="textarea" id="introduction" name="extbook.introduction" value="" />
            <td align="right">暂无：</td>
            <td>
                
            </td>
           </tr>
        </table>
     </table>
    ##<input type="hidden" id="creatUser" name="extbook.creatUser" value="admin" />
    
    
</form>
<input type="button" value="确认"  οnclick="validate()"/>
</div>
</div>
</div>

## 内容 end
#parse("WEB-INF/common/fooder.vm")

天启儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swfupload上传控件demo支持上传，删除图片。兼容ie7+，火狐，谷歌浏览器
11-07
swfupload上传图片控件，支持删除。兼容浏览器ie7+，火狐，谷歌。上传界面类似QQ空间发表说说界面。
使用deep穿透更改 Element ui 样式在 谷歌浏览器生效，而在火狐浏览器不生效问题
JKC_HOWL的博客
11-09 1494
使用/deep/穿透更改组件库样式在火狐浏览器不生效原因 /deep/ 穿透如果只是添加在父级的话，那么在火狐浏览器和谷歌浏览器都是生效的 /deep/ .father { width: 100%; height: 100%; .el-select .el-input .el-input__icon { line-height: 26px; color: #000000; } .avatar-uploader .el-upload { bor
火狐浏览器原生input和el-upload上传文件问题，选取完文件后没反应？
weixin_45059349的博客
01-06 693
火狐浏览器上传组件兼容问题
解决uploadify组件火狐浏览器不兼容问题
热门推荐
duqian42707的博客
11-25 1万+
本文地址：http://blog.csdn.net/duqian42707/article/details/53341380uploadify官方网站：http://www.uploadify.com/ 里面提供了两种插件：html5的和flash的，html5的要收费，而flash的免费。本文只针对flash版。uploadify插件在火狐浏览器不兼容主要还是flash插件的问题。首先检查浏览器
图片上传预览JS效果 支持谷歌，IE，火狐等主流浏览器经过测试
10-16
经过测试的图片上传预览，支持主流浏览器，经过测试的，代码更加的简单
图片上传预览（兼容所有主流浏览器）
08-07
图片上传预览，亲测兼容：ie6~ie8及以上浏览器，谷歌，火狐，Safari，opera，兼容移动端
jquery实现选择图片预览,兼容各大主流浏览器
06-25
jquery实现选择图片预览功能,能兼容各大主流浏览器.如谷歌 IE 360 火狐等
jquery图片预览与裁剪
01-06
经改进 现该demo兼容火狐 IE6;7;8;9;谷歌;世界之窗等主流的浏览器 有问题欢迎反馈 即时跟进
Jquery 无刷新图片上传插件ajaxPostUpload
03-20
Jquery 无刷新图片上传插件ajaxPostUpload 1.免费永久开源 2.单文件上传 ...4.兼容谷歌、火狐、360等主流浏览器 5.文件开源代码只有1.9K，属于轻量级图片上传插件 6.图片预览功能 7.欢迎补充功能和提交功能
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1025
​​​​​​​。
一个小时学习javaScript
weixin_43064364的博客
04-20 786
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JavaScript 高性能编程 —— Data Access 数据访问
最新发布
cccloveforever的博客
04-20 1418
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 428
官网代码（在取消选中状态的时候不生效）
Vue.js（自定义指令）
Luo3255069063的博客
04-18 429
【代码】Vue.js（自定义指令）
PLSQL的下载与安装
code袁的博客
04-18 520
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
ie6.0浏览器下载-csdn
08-01
IE6.0浏览器下载需要访问CSDN网站。...需要注意的是，由于IE6.0浏览器存在一些安全漏洞，使用它可能会存在安全风险，建议用户尽量使用更先进的浏览器，如谷歌浏览器、火狐浏览器等，以保护自己在网络上的安全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值