当前位置: 代码迷 >> ASP.NET >> 怎么实现选择图片后能预览(不需要提交到后台)
  详细解决方案

怎么实现选择图片后能预览(不需要提交到后台)

热度:6537   发布时间:2013-02-25 00:00:00.0
如何实现选择图片后能预览(不需要提交到后台)
如何实现选择图片后能预览(不需要提交到后台),哪位大侠提供个好点方案,要兼容性好的,谢绝吹泡

------解决方案--------------------------------------------------------
jquery库

$(document).ready(function(){
$('#insert').click(function(){
var value = $('#file').val();.
$("#view")('<img src="' + value + '" />');
});
});

style="float:right;padding:10px;float:left;">
<input type="text" value="" id="file" name="file">
<a name="Insert" id="insert" href="javascript:void(0)">Via</a>
</form>
<div id="view" style="width:50px;height:50px;display:block;"></div>
------解决方案--------------------------------------------------------
function fnOpenImg()
{
var strImgUrl=document.getElementById("txtUpImg").value;
if(strImgUrl!="")
{
var strExName=strImgUrl.substring(strImgUrl.lastIndexOf("."),strImgUrl.length).toUpperCase(); //取得文件扩展名
if("|.JPG|.GIF|".lastIndexOf(strExName) < 0)
{
document.getElementById("txtImg").style.display="none";
alert("·图片格式错误,只能上传 *.JPG 和 *.GIF 格式图片!");
}
else
{
document.getElementById("txtImg").src=strImgUrl;
document.getElementById("txtImg").style.display="";
}
}
else
{
document.getElementById("txtImg").style.display="none";
}
}


<asp:FileUpload ID="txtUpImg" onchange="fnOpenImg();" Width="100%" runat="server" />
<asp:Button ID="btOK" runat="server" Text="上传图片" OnClick="btOK_Click" />


------解决方案--------------------------------------------------------
探讨

代码 http://jsfiddle.net/ACDB4/


online demo:http://jsfiddle.net/ACDB4/show/

随便试一张图片:http://avatar.profile.csdn.net/D/F/E/2_liu_ben_qian.jpg 按via就可以图片预览。

------解决方案--------------------------------------------------------
LZ如果不想在上传到服务器之前有图片预览,这个可能有点麻烦
LZ可以参考下kindeditor开源编辑器的 批量上传图片的方法(貌似设计flash),但是自己写的难度较大
http://www.kindsoft.net/demo.php

如果LZ想轻松点实现可以使用一种变相的方法
LZ在点击上传按钮后直接将文件上传到一个temp文件夹,
不然不管用户是否对该图片进行操作,在操作结束后都将这张图片的文件删除
------解决方案--------------------------------------------------------
探讨
你这个代码只是填充一个网络上的图片地址,……

------解决方案--------------------------------------------------------
不要使用jquery-form,使用隐藏的iframe就很好,‘jquery-form是js实现,存在兼容性问题
  相关解决方案