h5可预览 图片ajax上传 ，后台有点弱不知道数据怎么取，但是可以肯定数据上传成功了
<!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上传 ，后台有点弱不知道数据怎么取，但是可以肯定数据上传成功了的更多相关文章
- h5可预览 图片ajax上传 （补更），后台数据获取方法---php
原理是 先获取,然后手动转移文件路径,不然会被服务器自动删除 demo如下: <?php header('content-Type:text/html;charset=utf-8'); $fil ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
- 前端预览图片和H5canvas压缩图片上传
思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...
- 异步上传&预览图片-不压缩图片
本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- Thinkphp5+plupload图片上传功能，支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
- 上传预览图片的插件jquery-fileupload
上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...
- 富文本编辑器handyeditor，上传和预览图片的host地址不一样
使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...
随机推荐
- Neo4j 第二篇：图形数据库
在深入学习图形数据库之前,首先理解属性图的基本概念.一个属性图是由顶点(Vertex),边(Edge),标签(Lable),关系类型和属性(Property)组成的有向图.顶点也称作节点(Node), ...
- 14、Iterator跟ListIterator的区别
14.Iterator与ListIterator的区别 在使用List,Set的时候,为了实现对其数据的遍历,会经常使用到Iterator(跌代器).使用跌代器,不需要干涉其遍历的过程,只需要每次取出 ...
- web 直播&即时聊天------阿里云、融云（二）
上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^... (ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当 ...
- java虚拟机学习-深入理解JVM(1)
1 Java技术与Java虚拟机 说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成: Java编程语言.Java类文件格式.Java虚拟机和Java应 ...
- 前端小课堂 js：函数的创建方式及区别
js 函数的创建大体有这几种方式: -1-函数表达式(函数字面量): 说白了就是把一个函数赋值给了一个变量. var fun1 = function(index){ alert(index); } f ...
- OpenStack云平台的网络模式及其工作机制
网络,是OpenStack的部署中最容易出问题的,也是其结构中难以理清的部分.经常收到关于OneStack部署网络方面问题和OpenStack网络结构问题的邮件.下面根据自己的理解,谈一谈OpenSt ...
- openfire源码解读--用户登录
根据xmpp协议 客户端发送: <auth xmlns='urn:ietf:params:xml:ns:xmpp-sasl' mechanism='PLAIN'>XXXXXXXXXXXXX ...
- 时间序列分析算法【R详解】
简介 在商业应用中,时间是最重要的因素,能够提升成功率.然而绝大多数公司很难跟上时间的脚步.但是随着技术的发展,出现了很多有效的方法,能够让我们预测未来.不要担心,本文并不会讨论时间机器,讨论的都是很 ...
- js常用的4种截取字符串方法
平常经常把这几个api的参数记混了,于是打算记录下来,当不确定的时候在拿出来翻翻: 在做项目的时候,经常会需要截取字符串,所以常用的方法有slice().substr().substring().ma ...
- javaSE_07Java中类和对象-封装特性
一.谈谈什么是面向对象的思维 理解面向对象,重点是要思考以下的问题 面向过程 vs 面向对象 Ø 谈谈什么是面向过程的编程思想? Ø 为什么有面向过程还要有面向对象? Ø 谈谈什么是面向对象的编程思想 ...