<!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上传图片预览的更多相关文章

  1. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  2. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

  3. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  5. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  6. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  7. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  8. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  9. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

随机推荐

  1. Group by与having理解

    注意:select 后的字段,必须要么包含在group by中,要么包含在having 后的聚合函数里. 1. GROUP BY 是分组查询, 一般 GROUP BY 是和聚合函数配合使用 group ...

  2. 第十章 Vim程序编辑器学习（下）

    在试用vim编辑时,vim会在于被编辑的档案的目录下,再建立一个名为****.swp的档案,如果你的系统因为某些原因断线,你编辑的档案还没有存储,这个时候的****.swp就能够挥发救援的功能 1.在 ...

  3. [ActionScript 3.0] AS3 绘制正八面体（线条）

    分析: 将八面体置于3D坐标系中,其中心的坐标位于原点(0,0,0),让八面体的六个顶点恰好位于3D坐标系的x轴.y轴和z轴上,则从八面体的中心到这六个顶点的距离是相等的.我们可以假设这个距离为r,则 ...

  4. C#局域网聊天工具_UDP广播

    接上一讲,程序启动就要发送广播消息,如何发送广播消息,这一讲将给大家好好讲讲网络广播的知识,以及C#如何实现广播. 第一部分.什么是广播地址,以及广播地址怎么计算 1.1 广播地址是什么? 主机号全为 ...

  5. SQL SERVER 2005快捷键+visual studio 2008 快捷键

    一.SQL SERVER 2005快捷键  快捷键                                       功能           CTRL       +       SHIF ...

  6. (medium)LeetCode 241.Different Ways to Add Parentheses

    Given a string of numbers and operators, return all possible results from computing all the differen ...

  7. GL_INVALID_VALUE(0X501)

    当android应该打开GPU的支持后, 有些手机会出现黑屏.闪屏等现象. 跟踪控制台, 会打印日志GL_INVALID_VALUE(0X501). 参考资料:http://mobile.riaos. ...

  8. onmousemove和onmouseout事件的调用，和js使用双引号、单引号的时候应该注意的问题

    使用js的时候,统一使用双引号,然后通过反斜杠进行转义 ①如果同时使用单引号.和双引号的情况下容易出现问题,导致标签中表示的事件不能调用, ②导致由于标签没有封口而出现样式布局错误 <!DOCT ...

  9. MacPE+WinPE-黑苹果之路

    装黑苹果过程中,安装.备份.恢复都需要启动到MAC,总是从硬盘启动对于硬盘数据风险太大,琢磨着安装个pe用来维护,此外手上的winpe,也想着一并实现,免得搞两个u盘.找了个网页开工,http://b ...

  10. Objective-C 2.0的运行时编程

    Objective-C 2.0 的运行时环境叫做Morden Runtime,iOS 和Mac OS X 64-bit 的程序都运行在这个环境,也就是说Mac OS X 32-bit 的程序运行在旧的 ...