ASP.NET MVC图片上传前预览

@{
    ViewBag.Title = "Picture";
}
<!DOCTYPE html>
<html>
<head>
    <script src=‘@Url.Content("~/assets/plugins/jquery-1.10.2.min.js")‘ type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#fileInput").on("change", function () {
                var file = this.files[0];
                if (this.files && file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#img").attr(‘src‘, e.target.result);
                        $("#fn").text(file.name);
                        $("#fs").text(file.size);
                    }
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>

</head>
<body>
    <h2>Picture</h2>
    <div>
        <input id="fileInput" type="file" />
        <br />
        <img id="img" src=""  />
        <br />
        <span id="fn"></span>
        <span id="fs"></span>
    </div>
</body>
</html>
时间: 2024-10-09 01:11:54

ASP.NET MVC图片上传前预览的相关文章

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

[转]html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

input file实现多选,限制文件上传类型,图片上传前预览功能

限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性规定输入字段可选择多个值. 示例: <!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc) application/vnd.openxmlform

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char

【转】HTML5 jQuery图片上传前预览

hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如 谷歌Chrome和火狐等. <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta h

HTML5 FileReader实现图片上传前预览

如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下:

图片上传前预览的功能

最近自己想做一个项目,涉及到很多图片上传和预览的功能,所以简单记录下: 这里我没有用vue的组件库,是单纯靠input来写出一个图片上传的功能. 思路是:先用input[type=file]来获取本地的图片,然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url,把这个url赋值到用于预览的src就好了. <div class="upload"> <div class="img-container"&g

前端图片上传前预览

<!DOCTYPE html> <html> <head> <title>图片上传预览</title> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascri

基于layUI的图片上传前预览功能的2种实现方式

上传页面采用了layui 的上传模块,要实现的功能:选择文件后---点击文件名,页面中间弹窗内预览图片,先看效果图: 预览功能的实现具体有2种方式:第一种是用blob+FileReader,第二种是layUI自带的. 1. 用layUI 自带的参数实现图片预览: layui.use('upload', function(){ ... choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列