<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
height: 200px;
width: 600px;
border: 1px solid black;
margin: 100px auto;
}
.demo img{
height: 100px;
width: 100px;
border: 5px solid #CCCCCC;
}
</style>
</head>
<body>
<div class="box">
<input type="file" name="" id="btn" value="文件上传" multiple="multiple" />
<input type="button" id="btn1" value="ajax提交到服务器" />
<div class="demo"></div>
</div>
<script src="hezhifile.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> //存储所有文件的预览信息
var sumfile = [];
//控件上传
var btn = document.getElementById("btn"); btn.onchange = function(){
var ffs = []
for (var i=0;i<this.files.length;i++) {
ffs[i] = this.files[i]
}
sumfile = sumfile.concat(ffs)
//过滤文件
//var ffs = fileFilter(ffs);
//读取文件 for (var i=0;i<ffs.length;i++) {
(function(i){
var freader = new FileReader(); freader.readAsDataURL(ffs[i],'gbk') freader.onload = function(){
var result = freader.result;
var img = document.createElement('img');
img.src = result;
document.querySelector('.demo').appendChild(img)
} })(i)
} this.value= "";//用自定义按钮来做,原生的太丑了
console.log(sumfile);
} //过滤文件的函数
function fileFilter(files){
for(var i=0;i<files.length;i++){
if(files[i].size>5000){
alert(files[i].name+'该图片大于5000,上传失败')
files.splice(i,1)
}
} return files
} //拖拽上传
var obox = document.querySelector('.box'); obox.ondragover = function(ev){
var ev = ev || event;
ev.preventDefault()
ev.stopPropagation()
}
obox.ondrop = function(ev){
var ev = ev || event;
ev.preventDefault();
var ffs = []
for (var i= 0;i < ev.dataTransfer.files.length;i++) {
ffs[i] = ev.dataTransfer.files[i]
} //一个拖动多上上传
sumfile = sumfile.concat(ffs); var freader = new FileReader(); freader.readAsDataURL(ffs[0],'gbk') freader.onload = function(){
var result = freader.result;
var img = document.createElement('img');
img.src = result;
document.querySelector('.demo').appendChild(img)
} console.log(sumfile);
} //ajax 上传
var btn1 = document.querySelector('#btn1'); btn1.onclick = function(){ for(var i=0;i< sumfile.length;i++){
(function(i){
var formData = new FormData(); //formData.append('name',sumfile[i].name)
formData.append("userfile", sumfile[i]); var xhr = new XMLHttpRequest(); xhr.open('post','01.php',true)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(formData) xhr.onreadystatechange= function(){
if(xhr.readyState==4&&xhr.status==200){
var result = xhr.responseText;
document.body.innerHTML+=result
}
} })(i)
} //取出每个文件一个个上传 } </script> </body>
</html>

h5可预览 图片ajax上传 ,后台有点弱不知道数据怎么取,但是可以肯定数据上传成功了的更多相关文章

  1. h5可预览 图片ajax上传 (补更),后台数据获取方法---php

    原理是 先获取,然后手动转移文件路径,不然会被服务器自动删除 demo如下: <?php header('content-Type:text/html;charset=utf-8'); $fil ...

  2. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  3. 前端预览图片和H5canvas压缩图片上传

    思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...

  4. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  5. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  6. [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  7. Thinkphp5+plupload图片上传功能,支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  8. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

  9. 富文本编辑器handyeditor,上传和预览图片的host地址不一样

    使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...

随机推荐

  1. 【LR11】Error -27796: Failed to connect to server"server:port": [10060] Connection timed out错误解决办法

      场景描述:被测系统是发布在远程服务器上的,假设IP是10.10.10.10,端口是8066,那么访问地址是http://10.10.10.10:8066/,在control机器上我设置了IP欺骗. ...

  2. Qt Opencv 在Linux下摄像头简单示例(转)

    下面写的文章也许网上也有类似的,但是大多数都没有给出思路及背景,让初学者每次都只能学到一点皮毛,不少知识需要大量搜索零碎地拼凑起来.题外话,虽然现在是碎片化信息时代,但正是这样信息整合能力也显得非常重 ...

  3. MyBatis通用Mapper开发

    通常情况下,MyBatis 的增删改查操作需要自己在相应xml中写相关语句, 但是运用相关工具,其实可以很方便的自动生成单表的所有增删改查(通用的多表联合查询还是需要自己写). 也可以根据具体环境,设 ...

  4. 初码-Azure系列-文章目录

    系统迁移 初码-Azure系列-记一次MySQL数据库向Azure的迁移 初码-Azure系列-迁移PHP应用至Azure的一些实践记录和思考 初码-Azure系列-记一次从阿里云到Azure的迁移和 ...

  5. 传统平面广告已OUT出局,VR全景异军突起——VR全景智慧城市

    VR,近两年异军突起的"黑科技".从1935年斯坦利·温鲍姆首次在小说中描述VR眼镜,到如今PC头盔.VR分体机以及VR一体机的相继问世,VR自身已从虚拟走向现实.而当硬件迭代逐步 ...

  6. 提高code效率

    分享下个人编码挫折,关于提高编码效率.代码规范.清晰的代码模块顺序.及时总结代码(提取出可复用的)以及清晰的注释,这是我感觉有必要的,因为工作到后期,代码量都非常的大.就是上个周5那天的整体工作效率都 ...

  7. [机器学习实践] 针对Breast-Cancer数据集

    本篇博客中,我们将对一个UCI数据库中的数据集:Breast-Cancer数据集,应用已有的机器学习方法来实现一个分类器. 本文代码链接 数据集概况 数据集的地址为:link 在该页面中,可以进入Da ...

  8. 【JAVAWEB学习笔记】网上商城实战5:后台的功能模块

    今日任务 完成后台的功能模块 1.1      网上商城的后台功能的实现: 1.1.1    后台的功能的需求: 1.1.1.1  分类管理: [查询所有分类] * 在左侧菜单页面中点击分类管理: * ...

  9. eclipse 创建maven 项目 动态web工程报错

    Eclipse 创建maven 项目 动态web工程 注:Eclipse版本为(Version: Mars.1 Release (4.5.1))maven版本为(apache-maven-3.3.9) ...

  10. HTTPS反向代理嗅探

    两年前的文章,一直在本地笔记放着,发现博客上竟然没存.发出来. 先说说什么是SSL:     SSL是Secure Socket Layer的简称,中文意思是安全套接层,由NetScape公司开发,用 ...