js HTML5多图片上传及预览实例解析（不含前端的文件分割）

网络编程 2024/9/24 佚名

3 1 2

本文实例为大家分享了js HTML5多图片上传及预览实例，供大家参考，具体内容如下

主要运用
1、HTML5 files可以选择多文件，以及获取多文件信息
2、XMLHTTPRequest对象，发送HTTP传输请求
3、将每一个文件放在FormData，进行传输
4、利用readAsDataURL将图片内容直接变成url，放在img标签的src当中，生成可预览的图片

html+css+js代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>test html FileReader</title>
<style type="text/css">
html,body,header,footer,div,ul,li,h1,h2,h3,h4,h5,h6,label,input,textarea,p,span,a{
 padding: 0;
 margin: 0;
}
img {
 border: 0;
}
em,strong{
 font-weight: normal;
 font-style: normal;
}
ul {
 list-style: none;
}
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
}
a,a:after{
 text-decoration:none;
}
.photo_wrap{
 clear:both;
}
.photo_wrap li{
 margin:10px;
 width:150px;
 float:left;
}
.photo_box {
 height:150px;
 width:150px;
 overflow:hidden;
 position:relative;
}
.photo_box .img1{
 height:150px;
}
.photo_box .img2{
 width:150px;
}
.upload_result{
 height:50px;
}
.btns{
 position:relative;
 height:40px;
 width:100px;
 float:left;
}
.btn{
 height:40px;
 line-height:40px;
 color:#FFF;
 display:block;
 border-radius:3px;
 text-align:center;
 background-color: #FF5581; /* Old browsers */
 background-image: -moz-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* FF3.6+ */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA7B9C), color-stop(100%,#FF5581)); /* Chrome,Safari4+ */
 background-image: -webkit-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */
 background-image: -o-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Opera 11.10+ */
 background-image: -ms-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* IE10+ */
 background-image: linear-gradient(to bottom,#FA7B9C 0%, #FF5581 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FA7B9C', endColorstr='#FF5581',GradientType=0 ); /* IE6-8 */
 box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn_add_pic{
 width:100px;
 position:absolute;
 top:0;
 left:0;
}
.btn_upload{
 width:100px;
 margin:0 10px 10px;
 float:left;
}
.btn:hover,
.btn_cur{
 background-color: #FB99B1; /* Old browsers */
 background-image: -moz-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* FF3.6+ */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB99B1), color-stop(100%,##FF5581)); /* Chrome,Safari4+ */
 background-image: -webkit-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */
 background-image: -o-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Opera 11.10+ */
 background-image: -ms-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* IE10+ */
 background-image: linear-gradient(to bottom,#FB99B1 0%, #FF5581 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB99B1', endColorstr='#FF5581',GradientType=0 ); /* IE6-8 */
}
.file_input_wrap{
 position:absolute;
 top:0;
 left:0;
 width:100px;
 height:40px;
}
.file_input_wrap label{
 width:100%;
 height:100%;
 display:block;
 opacity:0;
 cursor:pointer;
}
.file_input_wrap input{
 opacity:0;
 filter:alpha(opacity=0);/*ie8及以下*/
 position:absolute;
 top:7px;
 right:173px;
 cursor:pointer;
 width:95px;
}
.photo_box .icon_pos{
 height:20px;
 width:20px;
 display:block;
 position:absolute;
 right:0;
 bottom:0;
}
.photo_box .loading{
 height:10px;
 display:block;
 position:absolute;
 left:0;
 bottom:0;
 background-image:url(loading.gif);
}
.sucess_icon{
 background-image:url(icons_01.png);
 background-position:0 0;
}
.error_icon{
 background-image:url(icons_01.png);
 background-position:-20px 0;
}
</style>
</head>

<body>
<div class="btns">
 <a class="btn btn_add_pic" id="J_add_pic" href="javascript:;">添加图片</a>
 <div class="file_input_wrap">
 <input type="file" id="file" name="file" accept="image/*" multiple onChange="fileInfo(this)" />
 <label id="J_add_area"></label>
 </div>
</div>
<a class="btn btn_upload" id="J_upload" href="javascript:;">开始上传</a>
<div id="J_photo_wrap">
 <ul class="photo_wrap">
 </ul>
</div>
</body>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">

php收到文件的代码（这里只获取文件名字、类型、大小，没有进行其它操作） 


<"name" => $name,
 "type" => $type,
 "size" => $size,
 "status" => 1
 );
 
 $return = json_encode($return);
 
 echo $return;
?>





存在的问题

1、为了生成缩略图，readAsDataURL读取文件内容会占用内存，所以大图片会造成浏览器卡住或者奔溃

2、上传没有进行分段处理
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

html5多图片上传预览,js图片预览上传,js多图上传,js,html5图片预览

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js HTML5多图片上传及预览实例解析（不含前端的文件分割）”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

js HTML5多图片上传及预览实例解析（不含前端的文件分割）

XMLHttpRequest Level 2 使用指南

JavaScript组合模式学习要点

评论“js HTML5多图片上传及预览实例解析（不含前端的文件分割）”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接