C#中的FileUpload 选择后的预览效果具体实现

C#中的FileUpload 选择后的预览效果

实现方法:

HTML:


代码如下:

<asp:FileUpload ID="fupTmpPic" runat="server" onchange="onFileChange(this);" />
<asp:Image ID="imgDimensionalPic" runat="server" />

JS:


代码如下:

<script type="text/javascript">
function onFileChange(sender) {
document.getElementById("imgDimensionalPic").src = window.URL.createObjectURL(sender.files[0]);
}

</script>

例:

时间: 2013-12-02

input type=file 选择图片并且实现预览效果的实例

通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上传图片,且可以选择多个文件 <input type="file" accept="image/*" multiple="multiple"/> 当然,直接一个input type=file 只能选择上传的文件

JS实现的input选择图片本地预览功能示例

本文实例讲述了JS实现的input选择图片本地预览功能.分享给大家供大家参考,具体如下: 预览效果见下图: HTML代码如下: <div class="content" style="margin-top:100px;height:200px;"> <div id="div4bm" style="float:left;"> <!--input[button] 触发 file click事件--&g

JS交互点击WKWebView中的图片实现预览效果

Swift 4.0 WKWebView 1.注入js代码 (重点) func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let jsGetImages = "function getImages(){" + "var objs = document.getElementsByTagName(\"img\");" + "var imgScr =

JavaScript 图片预览效果 推荐

上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果. 兼容:ie6/7/8, firefox 3.5.5 后台支持下还兼容:opera 10.10, safari 4.0.4, chrome 3.0 ps:兼容opera, safari和chrome需要后台支持,请下载实例测试. 程序说明 [基本原理] 图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像.程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img

jQuery+HTML5实现图片上传前预览效果

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

Android使用ViewPager实现图片滑动预览效果

本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码,供大家参考,具体内容如下 效果图: 滑动前: 滑动后: 代码非常简单,实现起来很容易 xml代码: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/ap

基于jquery实现的上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u

JS+HTML5实现上传图片预览效果完整实例【测试可用】

本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器. 在网上找了下解决方案,如下所示: <!DOCTYPE HTML> <html> <head> <meta charse

原生js FileReader对象实现图片上传本地预览效果

本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta