首页 新闻 搜索 专区 学院

如何做一个在线预览图片的按钮

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>

如上写不起效果,该如何改呢

zhengyingcan的主页 zhengyingcan | 初学一级 | 园豆:12
提问于:2014-10-23 09:20
< >
分享
最佳答案
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
xingoo | 小虾三级 |园豆:711 | 2015-04-28 10:42
其他回答(2)
0

这个没法严格的判断吧?只能你自己规定好,什么样的字符串格式会是图片。

还有,如果我没猜错的话,你的后端应该是asp.net?这种后端代码和前端js代码糅合在一起?当然我不太理解asp.net的编码风格,不过个人认为揉在一起很容易出问题。

yibuyisheng | 园豆:217 (菜鸟二级) | 2014-10-24 22:23
0

在H5的浏览器中可以通过FileReader这个东西来做上传预览,我这里做了一个js组件来实,但在ie低版本里,就相当之麻烦,要Active,所以还不如传到服务器后再预览,

demo请看:http://www.cnblogs.com/tianxiangbing/p/mobile-photo-preview.html

田想兵 | 园豆:244 (菜鸟二级) | 2015-05-11 17:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册