图片上传时预览的问题？？？？？？？？？？？？

lihuan2008a 2011-03-17 12:24:24

产品上传图片，在新增产品时，图片的地方默认有一张图片，当有选择图片时，把默认的图片替换掉并显示出现在的图片，此时图片并没有上传，点击保存后才上传！要怎么做啊，ie8里的，最好通用些。

...全文

249 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

lihuan2008a 2011-03-17

打赏
举报

//得到本地图片路径
function getPath(obj){
if(obj) {
if (window.navigator.userAgent.indexOf("MSIE")>=1) {
obj.select();
return document.selection.createRange().text;
} else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{ if(obj.files) {
return obj.files.item(0).getAsDataURL(); }
return obj.value; }
return obj.value;
}
}

这样可以得到本地图片路径，可我直接在onchange事件里把路径传给img的src它不行啊，没有显示，貌似路径中的空格都成%20啦!

lihuan2008a 2011-03-17

打赏
举报

[Quote=引用 1 楼 zell419 的回复:]
参考
如文所说 opera safari chrome 不行。
ie8是没问题的。
[/Quote]
恩，这个图片预览是没问题的，但是他刚开始出来的页面，放图片的地方没有默认图片啊，用他的这个方法默认图片就不显示了

zell419 2011-03-17

打赏
举报

参考
如文所说 opera safari chrome 不行。
ie8是没问题的。

lihuan2008a 2011-03-17

打赏
举报

同志们啊，ie8里面图片不能显示啊！.....................

lihuan2008a 2011-03-17

打赏
举报

[Quote=引用 10 楼 yingying0406 的回复:]
至于js我之前上传过，你可以去下载
[/Quote]
呵呵，谢了，那几个js我有的,预览是可以的，但它这样在没选图片时的默认的图片就没有了哦！

yingying0406 2011-03-17

打赏
举报

至于js我之前上传过，你可以去下载

yingying0406 2011-03-17

打赏
举报

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的圈子-相册</title>

<script type="text/javascript" src="/js/imgPreview/CJL.0.1.min.js"></script>
<script type="text/javascript" src="/js/imgPreview/QuickUpload.js"></script>
<script type="text/javascript" src="/js/imgPreview/ImagePreviewd.js"></script>

</head>

<body>
<pubTags:head />
<pubTags:left />
<div id="content">
<pubTags:menu bmenu="ste-photo" amenu="steward"/>
<div id="main">
<div class="phbj" class="perview">
<form action="lookPagesaveprivacyphoto.do" method="post"
enctype="multipart/form-data"
class="com.raxtone.community.img.web.action.LookPageAction" name = "theform" onsubmit="return CheckPreview(this)">
<font color="red"><s:property value="message"/></font>
<ul class="phleft">
<li>
<img src="/images/upfload.gif" />
上传照片并预览
</li>
<li>
<input id="idFile" name="pic" type="file" class="seclet" />
</li>
<li>
<input type="submit" value="" class="tijiao" />
</li>
<li>
<input type="button" value="返回" class="tijiao" onclick="window.history.go(-1)"/>
</li>
<li>
请上传JPG，JPEG， GIF，PNG或BMP文件，每个文件大小可以到2M
</li>
</ul>
<div class="phright">
<img id="idImg" />
</div>
</form>

<script>

var ip = new ImagePreview( $$("idFile"),$$("idImg") , {
maxWidth: 200, maxHeight: 200, action: "viewImg.jsp",onCheck: CheckPreview
});
ip.img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function(){ ip.preview(); };

//检测程序
var exts = "jpg|gif|bmp|png|jpeg", paths = "|";
function CheckPreview(){
var value = this.file.value, check = true;
if ( !value ) {
check = false; alert("请先选择文件！");
} else if ( !RegExp( "\.(?:" + exts + ")$$", "i" ).test(value) ) {
check = false;
alert("只能上传以下类型：" + exts);
if (!window.addEventListener) {
document.getElementById("idFile").select();
document.execCommand('Delete');
}else {
document.getElementById("idFile").value = "";
}
} else if ( paths.indexOf( "|" + value + "|" ) >= 0 ) {
check = false; alert("已经有相同文件！");
}
return check;
}

</script>

</body>
</html>

lihuan2008a 2011-03-17

打赏
举报

[Quote=引用 5 楼 zell419 的回复:]
HTML code

<!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 runat="se……
[/Quote]
zell419非常感谢你的回答，这段代码存为html运行是没有问题的，当我换成jsp页面，并且放到tomcat下时，图片不能正常显示，右键查看属性里是协议、类型、创建时间、修改时间不可用，不知道怎么回事哦！

KK3K2005 2011-03-17

打赏
举报

上传图片这个图片先保存在非正式的目录下
然后前台显示这个图片
用户点保存了就把这个图片替换原来的图片

碧海情天-赵亮 2011-03-17

打赏
举报

可以用JS把file:///d:/你的文件夹/图片.jpg这个地址去替代图片的SRC，就可以了。

zell419 2011-03-17

打赏
举报





<!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 runat="server">

    <title>无标题页</title>

    <script type="text/javascript">

        var loadImage = function(ele){

            var picPath   = getPath(ele);

            var image     = new Image();

            document.getElementById("imgDiv").innerHTML = "<img width='100px' height='100px' id='aPic' src='"+picPath+"'>";

        }

        var getPath = function(obj){

            if(obj){

                if (window.navigator.userAgent.indexOf("MSIE")>=1){

                    obj.select();

                    return document.selection.createRange().text;

                }

                else if(window.navigator.userAgent.indexOf("Firefox")>=1){ //firefox

                    if(obj.files){

                        return obj.files.item(0).getAsDataURL();

                }

                    return obj.value;

                }

                return obj.value;

            }

        }

    </script>

</head>

<body>

    <input type="file" name="uploadFile" id="uploadFile" onchange="loadImage(this);" />

    <div id="imgDiv">

       <img src="http://avatar.profile.csdn.net/5/A/B/2_lihuan2008a.jpg" />

    </div>

</body>

</html>