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 ...
随机推荐
- 用友UAP
1, 用友UAP 用友集团UAP中心成立于2013年1月1日,隶属于用友集团,旨在为全球大中型企业和公共组织提供计算平台,并打造完整.统一的软件产业链生态系统,以先进的平台.技术和专业的服务成为客户信 ...
- 使用gson-1.6.jar解析json
package com.example.mars_2900_json01; import java.io.StringReader; import java.lang.reflect.Type; im ...
- xcode 插件管理工具
每次xcode 更新后之前安装的插件 都失效了!解决办法: 一.可以通过在原插件项目infoplist新增 新xcode的 DVTPlugInCompatibilityUUID 来使之支持新版xcod ...
- DBCP数据库连接池
在用JDBC连接数据库的时候,需要创建对数据库的连接,这样才能执行后续的操作.然而,这样做有两个问题: 数据库允许的连接个数有限 创建连接的过程需要消耗内存和时间 所以,JDBC引入了连接池的概念.也 ...
- Servlet中的配置 web.xml
url-pattern配置 可以为同一个Servlet配置多个url-pattern: <servlet> <servlet-name>DoGetPostDemo</se ...
- eclipse 自动补全
在使用过程中问题又来了, 当按下空格键时会把第一行的内容自动上屏,其实很多时候就是想输一个空格而已. 解决办法: 取消之前的修改: "Auto Activation triggers for ...
- Delphi 中 paramstr 的用法及参数意义
原型 function paramstr(i:index):string 对于任何application paramstr(0)都默认代表的是应用程序的绝对路径.那 ...
- jmeter随笔（8）--请求post的 数据为空
1.请求post的 数据为空 分析:发现是java 解决方法: 查看 2.获取文本中数据乱码问题 问题:文本保存为UTF-8编码格式 获取的数据乱码: 分析:这是编码格式的问题 解决办法: 将文件保存 ...
- SICP 1.1-1.5
1.1 a = b = nil 1.2 (/ (+ (- (- (+ (/ ))))) (* (- ) (- )) 1.3 a = b = nil 1.4... 1.5 (define (p) (p) ...
- 如何在使用 RemoteWebDriver 打开网页的同时获取 Http 状态码
最近一直在用Selenium这个开源项目写一些web 自动化的小玩意.本来一直运行的挺好,直到有一天突然发现资源抓取失败了,翻看日志才发现,原来本该正常打开的页面返回了504错误所以自然失败了.如何避 ...