HTML5上传图片预览

笔记一下!!!

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" >
</form>
<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>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

前端开发者常用的9个JavaScript图表库

当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析。 对任何一个组织来说...

46470
来自专栏大数据钻研

漫谈前端之路

前言 前端之路何其漫漫~ 说明:本篇文章原是写给学弟学妹的,但想来花的功夫确实不少,就把此篇文章当做自己的一个阶段性总结文章了,会保持长期更新。 HTM...

46980
来自专栏移动开发之家

Android 拍摄(横\竖屏)视频的懒人之路

请捂着你的良心说话,对于贫穷的作者(我)不是应该打赏么 ̄へ ̄!,接下来工作又要忙起来了,更新应该是放缓了呢╮(╯_╰)╭,好伤心。

40730
来自专栏互联网软件技术

Phaser.js之简单的跑酷游戏

源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone)

31230
来自专栏DeveWork

低多边形(Low-Poly)简介及相关素材分享下载

最近一直缺乏原创文章,只因被各种琐事所累,难以静下心来写文章。这篇文章也非原创,分享下我知道的一些低多边形(Low-Poly)的素材。低多边形(Low-Poly...

296100
来自专栏Golang语言社区

【Golang语言社区】前端编程- 从零开始开发一款H5小游戏(一) 重温canvas的基础用法

初衷 从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。这个过程积累了一些经验,也算是参透了一些游戏开发的原理。在这里打算写一个系列教程,讲述怎样从...

449140
来自专栏BestSDK

前端修仙之路:从“路人”到大神,走对这几步很重要

HTML 与 CSS基础 前端的领域里,任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式...

38050
来自专栏iOS开发攻城狮的集散地

iOS开源小项目-WSL

29760
来自专栏BestSDK

一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。 苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边...

44770
来自专栏儿童编程

《动物魔法学校》儿童学编程Scratch之“外观”部分

导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

14040

扫码关注云+社区

领取腾讯云代金券