html5预览上传图片,HTML上传图片

怎么实现图片上传前预览功能呢？

预览图片

创新互联拥有一支富有激情的企业网站制作团队，在互联网网站建设行业深耕十余年，专业且经验丰富。十余年网站优化营销经验，我们已为千余家中小企业提供了成都网站制作、成都网站设计解决方案，按需策划设计，设计满意，售后服务无忧。所有客户皆提供一年免费网站维护!

预览功能的基本设计思路：创建一个img元素，再把文件域的value值赋值给img元素的src属性。

form name="form4" id="form4" method="post" action="#"

input type="file" name="file4" id="file4" ōnchange="preview4()" /

img id="pic4" src="" alt="图片在此显示" width="120"/

/form

scrīpt type="text/javascrīpt"

function preview4(){

var x = document.getElementById("file4");

var y = document.getElementById("pic4");

if(!x || !x.value || !y)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

y.src = "" + x.value;

}

else{ alert("您选择的似乎不是图像文件。"); }

}

/scrīpt

试下效果：

如果你用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。不知道他们为什么要这么做，我个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。

让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：

在Firefox的地址栏中输入“about:config”

继续输入“security.checkloaduri”

双击下面列出来的一行文字，把它的值由true改为false

然后你可以再试试上面预览，everything works well！可惜的是我们并不能要求所有的用户都去修改这个值（更不用说修改的过程还挺麻烦），所以这对我们来说毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。

用DOM来创建对象

在上面的XHTML代码中，我们为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持Javascrīpt，他不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，我们就需要在“运行时”再生成这个img对象，途径还是DOM。

form name="form5" id="form5" method="post" action="#"

input type="file" name="file5" id="file5" ōnchange="preview5()"/

/form

scrīpt type="text/javascrīpt"

function preview5(){

var x = document.getElementById("file5");

if(!x || !x.value)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

var y = document.getElementById("img5");

if(y){ y.src = '' + x.value; }

else{

var img=document.createElement('img');

img.setAttribute('src',''+x.value);

img.setAttribute('width','120');

img.setAttribute('height','90');

img.setAttribute('id','img5');

document.getElementById('form5').appendChild(img);

}

}

else{ alert("您选择的似乎不是图像文件。"); }

}

/scrīpt

html5拖拽图片上传，怎么获得图片原始尺寸

拖拽的过程就不说了，这里主要说一下如何在前端获取到图片的相关信息。

html5里有一个fileReader的全局变量，用来读取本地文件，比如txt，img等，下面是一个简单的代码。

function checkFile(files){

var file = files[0];

var reader = new FileReader();

// show表示div id='show'/div，用来展示图片预览的

if(!/image\/\w+/.test(file.type)){

show.innerHTML = "请确保文件为图像类型";

return false;

}

// onload是异步操作

reader.onload = function(e){

show.innerHTML = 'img src="'+e.target.result+'" alt="img"';

}

reader.readAsDataURL(file);

}

这样就能够在不上传到服务器的前提下预览图片。当然，这个问题的重点是获取图片的原始尺寸，html5里还提供了两个变量来获取：naturalWidth和naturalHeight，这两个分别来获取图片的原始宽度和原始高度。

在上面的例子中，就能通过下面的方式获取到：

var width = e.target.naturalWidth;

var height = e.target.naturalHeight;

还有一种情况就是，如果已经存在页面里的图片，怎么获取到原始尺寸呢，可以这样：

var img = document.getElementsByTagName('img')[0]; // 获取到图片

var width = img.naturalWidth;

var height = img.naturalHeight;

如何在手机浏览器中运用HTML5的文件API实现上传多图功能

Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能，还有一些网站继续采用Html formwith enctype=multipart/form-data，但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时，你发送给它一个字节流，所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器，在这个过程一直在不断的进行文件的上传。这种方式运行的非常好，不像Flash上传那这样充满了问题(特别是处理大文件上传的时候)，然而这种方法是相当复杂的并且听起来不容易理解，因为你本质上是接管了整个服务器端的处理（获取字节流的时候）同时包括了在服务器端实现multipart/form-data协议，伴随一系列的其他事情。

使用Html5 上传文件

XMLHttpRequest 在Html5 规范中已经有全新的变化，规定了XMLHttpRequest Level 2规范（目前最新版本）包含下列新的特性：

处理字节流，例如作为上传或者下载的File，Blob，FormData对象

上传或者下载中的进度事件

跨站点请求

允许创建匿名请求

可以设置请求超时

在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常，上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户，需要注意的是这种方式解决了不需要服务器端做任何改变，至少是目前处理multipart/form-data协议。所以服务器端的处理逻辑保留不变，这使得开发者适应这种技术相当容易。

图1：文件上传画面-准备上传 图2：显示上传完成画面

注意：上面的图片中，信息提示区域是提供给用户的：

当前选中文件的信息

文件名

文件大小

文件类型

上传完成多少的百分比进度条

上传速度或者上传带宽

距离上传完成大概还有多长时间

已上传文件大小

服务器端的响应

上面第6项或许看起来不重要，但事实上是相当重要的。因为我们用XMLHttpRequest，上传发生在后台，页面没有发生跳转等任何变化，所以对于你用它处理其他一些事情来说是一个非常好的特性。

Html5 Progress Event

对于Html5 Progress Events规范，Html5 Progess Events提供了下列与本次讨论相关的信息

total - 总的字节数

loaded - 到目前为止上传的字节数

lengthComputable - 可计算的已上传字节

请注意到我们需要用两个信息去计算要显示给用户的其他所有信息。要计算出来其他的信息通过上面我们得到信息是相当容易的，但是那需要一些额外的代码并且创建一个定时器。

Html5 Progress Event 应该是什么

考虑到有一部分人想更好的提供给用户所有的信息，所以Html5 Progress Event应该更好的满足需要，因为它给浏览器供应商提供这些额外信息是相当简单的，所以建议progress event应该修改成如下：

total - 总的字节数

loaded - 到目前为止上传的字节数

lengthComputable - 可计算的已上传字节

transferSpeed long类型

timeRemaining JavaScript 日期对象

Html5 上传 用XMLHttpRequest

浏览器支持情况

支持这一特性的浏览器最低版本

Firefox 4.0 beta 6

Chrome 6

Safari 5.02

IE 9 Beta and Opera 10.62 不支持这一特性

简单的示例

下面是一个完整的Html页面包含了实现文件上传并带有进度提示的JavaScript代码，只是实现了基本的功能，感兴趣的可以自己做扩展。 需要吧上传接口修改成自己服务的。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

!DOCTYPE html

html

head

titleUpload Files using XMLHttpRequest - Minimal/title

script type="text/javascript"

function fileSelected() {

var file = document.getElementById('fileToUpload').files[0];

if (file) {

var fileSize = 0;

if (file.size 1024 * 1024)

fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';

else

fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

document.getElementById('fileName').innerHTML = 'Name: ' + file.name;

document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;

document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

}

}

function uploadFile() {

var fd = new FormData();

fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.addEventListener("load", uploadComplete, false);

xhr.addEventListener("error", uploadFailed, false);

xhr.addEventListener("abort", uploadCanceled, false);

xhr.open("POST", "upload.do");//修改成自己的接口

xhr.send(fd);

}

function uploadProgress(evt) {

if (evt.lengthComputable) {

var percentComplete = Math.round(evt.loaded * 100 / evt.total);

document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';

}

else {

document.getElementById('progressNumber').innerHTML = 'unable to compute';

}

}

function uploadComplete(evt) {

/* 服务器端返回响应时候触发event事件*/

alert(evt.target.responseText);

}

function uploadFailed(evt) {

alert("There was an error attempting to upload the file.");

}

function uploadCanceled(evt) {

alert("The upload has been canceled by the user or the browser dropped the connection.");

}

/script

/head

body

form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx"

div class="row"

label for="fileToUpload"Select a File to Upload/labelbr /

input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/

/div

div id="fileName"/div

div id="fileSize"/div

div id="fileType"/div

div class="row"

input type="button" onclick="uploadFile()" value="Upload" /

/div

div id="progressNumber"/div

/form

/body

/html

html input file 属性怎么能够选择之后 马上预览图片

这个并不是那么简单做出来的，一般情况下会加一段iframe代码，模拟ajax上传。

代码很简单，如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleBy：DragonDean/title

script type="text/javascript"

//下面用于图片上传预览功能

function setImagePreview(avalue) {

var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");

if(docObj.files docObj.files[0])

{

//火狐下，直接设img属性

imgObjPreview.style.display = 'block';

imgObjPreview.style.width = '150px';

imgObjPreview.style.height = '180px';

//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

}

else

{

//IE下，使用滤镜

docObj.select();

var imgSrc = document.selection.createRange().text;

var localImagId = document.getElementById("localImag");

//必须设置初始大小

localImagId.style.width = "150px";

localImagId.style.height = "180px";

//图片异常的捕捉，防止用户修改后缀来伪造图片

try{

localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

}

catch(e)

{

alert("您上传的图片格式不正确，请重新选择!");

return false;

}

imgObjPreview.style.display = 'none';

document.selection.empty();

}

return true;

}

/script

/head

body

table width="100%" border="0" cellspacing="0" cellpadding="0"

tbody

tr

td height="101" align="center"

div id="localImag"img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;"/div

/td

/tr

tr

td align="center" style="padding-top:10px;"input type="file" name="file"

id="doc" style="width:150px;" onchange="javascript:setImagePreview();"/td

/tr

/tbody

/table

/body

/html