如何做一个在线预览图片的按钮
0
悬赏园豆：5
[已解决问题]
解决于 2015-07-08 13:41
我想做一个按钮,点击 先判断是否是.jpg或者是.image 档案,如果是的话,就直接在网页上预览图片, 以下是网友告诉我的方法.
HyperLink1.Text="点击下载";
HyperLink1.NavigateUrl="~/ScenicImg/"+FileUpload1.FileName;
问题是文件名是lblsp46.Text , 文件扩展名是lblsp20.Text, 这个js语言怎么写, 或者用jquery也行, 如果用jquery 这个语言怎么写呢,
<script type="text/javascript">
function Getyl() {
if (document.getElementById("lblsp20").value == ".jpg" ) {
var sp19 = document.getElementById("lblsp19").value;
HyperLink1.NavigateUrl = "~/UploadFile2/" + sp19;
}
}
</script>
如上写不起效果,该如何改呢
最佳答案
0
直接文件名字后缀校验 不就行了？
比如使用正则表达式
var picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/; if(!picReg.test(_v)){ alert("请选择正确的图片格式！"); return false; }
我正好写过纯JS的代码，仅供参考。这段代码，提供了上传预览的基本样例：
你需要自己调试下，因为是截取（网页代码不完整，而且有一些图片路径都需要自己修改。不要上来就说，你的代码怎么不好使哈！）只是提供思路！
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
</script>
</head>
<body>
<!-- **************************************************************************** -->
<p class="h3">示例内容</p>
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<button type="button" class="btn btn-primary col-md-1" >模板</button>
</div>
</div>
<script type="text/javascript">
</script>
<hr>
<!-- **************************************************************************** -->
<p class="h3">实时预览上传的图片</p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="previewIng"><img src="" class="img-thumbnail" id="previewImgSrc"></div>
<input type="file" class="form-control" id="upPreviewImg">
</div>
</div>
</div>
<script type="text/javascript">
var funcPreView = function(){
var upPreviewImg = function(options){
var _e = options.e;
var preloadImg = null;
_e.onchange = function(){
var _v = this.value;
var _body = document.body;
var picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;
if(!picReg.test(_v)){
alert("请选择正确的图片格式！");
return false;
}
if(typeof FileReader != 'undefined'){
var reader = new FileReader();
var _file = this.files[0];
reader.onload = (function(file){
return function(){
options.previewImgSrc.setAttribute("src",this.result);
options.previewImgSrc.style.display = "block";
}
})(_file);
reader.onerror = function(){
alert("文件读取数据出错！");
}
reader.readAsDataURL(_file);
}else{
alert("不支持！");
}
}
}
upPreviewImg({
"e":document.getElementById("upPreviewImg"),
"previewImgSrc":document.getElementById("previewImgSrc")
});
};
addLoadEvent(funcPreView);
</script>
收获园豆：5
其他回答(2)
0
这个没法严格的判断吧？只能你自己规定好，什么样的字符串格式会是图片。
还有，如果我没猜错的话，你的后端应该是asp.net？这种后端代码和前端js代码糅合在一起？当然我不太理解asp.net的编码风格，不过个人认为揉在一起很容易出问题。
0
在H5的浏览器中可以通过FileReader这个东西来做上传预览，我这里做了一个js组件来实，但在ie低版本里，就相当之麻烦，要Active,所以还不如传到服务器后再预览，
demo请看：http://www.cnblogs.com/tianxiangbing/p/mobile-photo-preview.html
