js input file文件上传图片并展示

​​​​​​

    1 页面HTML内容

    2 获取input[file]元素    

    3 对获取的file元素 *** 作，也就是 *** 作fileReader属性    

1：Blob

2:  File

3:  FileList

4:  FileReader

FileList ：

这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。

file对象中包含了name 文件名size type 文件类型lastModified 最后修改时间；

FileReader：异步读取本地文件内容；包括File 和Blob ；

    创建FileReader对象读取file文件

关于fileReader的几个属性：

FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一：

FileReader.result 只读文件的内容。该属性仅在读取 *** 作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取 *** 作。

fileReader的几个事件处理程序：

1 . FileReader.onbort:在读取 *** 作中止时触发。

2 . FileReader.onerror:在读取 *** 作遇到错误时触发。

3 . FileReader.onload:在读取 *** 作成功完成时触发。

4 . FileReader.onloadstart:在开始阅读时触发。

5 . FileReader.onloadend:无论是否成功 只要读取 *** 作完成都会触发。

6 . FileReader.onprogress:阅读Blob内容时触发。

FileReader的方法：

1 . FileReader.abort()中止读取 *** 作

2 . FileReader.readAsArrayBuffer()完成时result属性包含ArrayBuffer表示文件数据

3 . FileReader.readAsBinaryString()完成时result属性将包含来自文件的原始二进制数据作为字符串。

4 . FileReader.readAsDataURL()完成时result属性包含data：表示文本数据的URL；

5 . FileReader.readAsText()完成时result属性包含文本的内容作为文本字符串。

&lt?php

foreach ($_FILES["pictures"]["error"] as $key =&gt$error) {

&nbsp&nbsp&nbsp&nbspif ($error == UPLOAD_ERR_OK) {

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp$tmp_name = $_FILES["pictures"]["tmp_name"][$key]

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp$name = $_FILES["pictures"]["name"][$key]

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspmove_uploaded_file($tmp_name, "data/$name")

&nbsp&nbsp&nbsp&nbsp}

}

?&gt

<input type="file" name="img[]"/>

<input type="file" name="img[]"/>

然后php获取文件信息的时候

$_FILES["img"]["name"][0]//第一张图片名字

$_FILES["img"]["name"][1]//第2张图片名字

FileUpload实现单图片上传，如果想多图片上传，你试试这个：

<tr>

<td align="right" valign="top">

试卷照片：

</td>

<td align="left">

<div id="_container">

<input id="File1" type="file" name="File" runat="server" size="10" />

</div>

</td>

<td align="left" valign="bottom">

<input type="button" value="添加" onclick="addFile()" />

</td>

</tr>

addFile()源码：

//多文件上传，动态生成多个上传控件

function addFile() {

var div = document.createElement("div")

var f = document.createElement("input")

f.setAttribute("type", "file")

f.setAttribute("name", "file")

f.setAttribute("size", "10")

div.appendChild(f)

document.getElementById("_container").appendChild(div)

}

后台页面调用：

#region 上传添加图片的方法

/// <summary>

/// 上传添加图片的方法

/// </summary>

/// <param name="nId">关联id</param>

private static void UploadAndAddPicTures(int nId)

{

LMS.BLL.TRAIN_Pictrue PictrueBLL = new LMS.BLL.TRAIN_Pictrue()

List<LMS.Model.TRAIN_Pictrue>list = new List<LMS.Model.TRAIN_Pictrue>()

//遍历File表单元素

HttpFileCollection files = HttpContext.Current.Request.Files

for (int iFile = 0iFile <files.CountiFile++)

{

//检查文件扩展名字

HttpPostedFile postedFile = files[iFile]

string fileName

fileName = System.IO.Path.GetFileName(postedFile.FileName)

if (fileName.ToLower() != "")

{

LMS.Model.TRAIN_Pictrue Pictrue = new LMS.Model.TRAIN_Pictrue()

string scurTypeName = fileName.Substring(fileName.LastIndexOf("."))

//初始化原图物理路径

string sGuid_phy = Guid.NewGuid().ToString()

string sUrl_phy = ConfigurationManager.AppSettings["PhysicsObjectPath"].ToString() + sGuid_phy + scurTypeName

//初始化缩略图物理路径

string sGuid_web = Guid.NewGuid().ToString()

string sUrl_web = ConfigurationManager.AppSettings["PhysicsObjectPath"].ToString() + sGuid_web + scurTypeName

postedFile.SaveAs(sUrl_phy)//保存原图

PTImage.ZoomAuto(postedFile, sUrl_web, 100, 100, "", "")//生成缩略图，并保存

//保存原图虚拟路径到数据库

Pictrue.path = ConfigurationManager.AppSettings["WebObjectPath"].ToString() + sGuid_phy + scurTypeName

//保存缩略图虚拟路径到数据库

Pictrue.shrinkpath = ConfigurationManager.AppSettings["WebObjectPath"].ToString() + sGuid_web + scurTypeName

Pictrue.parid = nId

Pictrue.tables = "TRAIN_Hotel_MonthExam"

list.Add(Pictrue)

}

}

PictrueBLL.Add(list)

}

#endregion

希望对你有帮助！

---