HTML5上传图片预览
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/js/jquery.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" runat="server" enctype="multipart/form-data" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" >
<asp:Button ID="Button1" runat="server" Text="保存" onclick="Button1_Click" />
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
</form>
</body> </html>
后台：
using System.IO;
using System.Drawing;
public partial class demo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
//保存图片
protected void Button1_Click(object sender, EventArgs e)
{
HttpPostedFile imgfile = Request.Files["file0"];
imgfile.SaveAs(Server.MapPath("~/abc.jpg"));
}
}
如图：
说明：表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了
multipart/form-data，才能完整的传递文件数据。
HTML5上传图片预览的更多相关文章
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
随机推荐
- Windows 64位下安装Redis详细教程
方法/步骤 在D盘新建文件夹[redis],右键解压Redis ZIP包,把所有文件解压到redis文件夹中.(其他盘符也可以滴^_^) 文件介绍: redis-benchmark.exe ...
- proxmox3.2安装FreeBSD或者FreeNAS注意事项
别的不多说了,白般尝试,终于安装成功,原来硬件要如下设置才行,如下: 1)内存要开大点,512M 800M都不行,最后开导2G才可以,如下: 2)kvm硬件虚拟化一定要选择“否”,默认是“是”,这里 ...
- Linux网络流量监控工具-iftop
参考:http://blog.163.com/jgh2008@126/blog/static/28596246201092081139283/ 一.获得和安装iftop Centos:yum inst ...
- dede文章页调用当前栏目链接方法
DedeCMS内容页调用当前栏目其实用下来是调用不出来的,{dede:field.typename/}是有效的,可是 {dede:field.typeurl/}却调不出文档当前栏目所在目录链接URL. ...
- NAND flash cache编程
PROGRAM PAGE CACHE MODE 0x80-0x15: CACHE编程实际上是标准的页编程命令的带缓冲编程模式,编程开始是发布SERIAL DATA INPUT(0x80)命令,随后是5 ...
- {JavaScript}栈和堆内存，作用域
1.栈 stack”和“堆 heap”: 简单的来讲,stack上分配的内存系统自动释放,heap上分配的内存,系统不释放,哪怕程序退出,那一块内存还是在那里.stack一般是静态分配 ...
- 串口总是报'Error opening serial port'
Comm1.CommName := '//./' + Trim(combx_Port.Text); 目前串口大于20 用上面方法解决的 网上也有上面方法解决如下错误的. 若是您已会应用SPCOMM且 ...
- Eclispe 安装PropertiesEditor插件
一个不错的编写properties文件的Eclipse插件(plugin),有了它我们在编辑一些简体中文.繁体中文等Unicode文本时,就不必再使用native2ascii编码了.您可以通过Ecli ...
- (easy)LeetCode 205.Isomorphic Strings (*)
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- Android:使用adb命令行导出[数据库db3]文件
cmd->cd到:D:\tools\adt-bundle-windows-x86_64-20140321\adt-bundle-windows-x86_64-20140321\sdk\platf ...