JavaScript实现拖拽预览,AJAX小文件上传
本地上传,提前预览(图片,视频)
1.html中div标签预览显示,button标签触发上传事件。
- <div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>
- <button onclick="xhr2()">ajax上传</button>
2.禁止浏览器打开文件行为
- document.addEventListener("drop",function(e){ //拖离
- e.preventDefault();
- })
- document.addEventListener("dragleave",function(e){ //拖后放
- e.preventDefault();
- })
- document.addEventListener("dragenter",function(e){ //拖进
- e.preventDefault();
- })
- document.addEventListener("dragover",function(e){ //拖来拖去
- e.preventDefault();
- })
3.拖拽,预览文件
- var box = document.getElementById('drop_area'); //拖拽区域
- box.addEventListener("drop",function(e){
- var fileList = e.dataTransfer.files; //获取文件对象
- //检测是否是拖拽文件到页面的操作
- if(fileList.length == 0){
- return false;
- }
- //拖拉图片到浏览器,可以实现预览功能
- //规定视频格式
- Array.prototype.S=String.fromCharCode(2);
- Array.prototype.in_array=function(e){
- var r=new RegExp(this.S+e+this.S);
- return (r.test(this.S+this.join(this.S)+this.S));
- };
- var video_type=["video/mp4","video/ogg"];
- //创建一个url连接,供src属性引用
- var fileurl = window.URL.createObjectURL(fileList[0]);
- if(fileList[0].type.indexOf('image') === 0){ //如果是图片
- var str="<img width='200px' height='200px' src='"+fileurl+"'>";
- document.getElementById('drop_area').innerHTML=str;
- }else if(video_type.in_array(fileList[0].type)){ //如果是规定格式内的视频
- var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
- document.getElementById('drop_area').innerHTML=str;
- }else{ //其他格式,输出文件名
- //alert("不预览");
- var str="文件名字:"+fileList[0].name;
- document.getElementById('drop_area').innerHTML=str;
- }
- resultfile = fileList[0];
- },false);
4.ajax上传
- function xhr2(){
- var xhr = new XMLHttpRequest();//第一步
- //新建一个FormData对象
- var formData = new FormData(); //++++++++++
- //追加文件数据
- formData.append('file', resultfile);
- //post方式
- xhr.open('POST', 'xhr2.php'); //第二步骤
- //发送请求
- xhr.send(formData); //第三步骤
- //ajax返回
- xhr.onreadystatechange = function(){ //第四步
- if ( xhr.readyState == 4 && xhr.status == 200 ) {
- console.log( xhr.responseText );
- }
- };
- //设置超时时间
- xhr.timeout = 10000;
- xhr.ontimeout = function(event){
- alert('请求超时!');
- }
- }
5.php保存文件
- <?php
- print_r($_FILES["file"]);
- $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数
- move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));
- ?>
JavaScript实现拖拽预览,AJAX小文件上传的更多相关文章
- 基于Bootstrap 3可预览的HTML5文件上传插件
前端常用资源地址: http://www.htmleaf.com/ http://www.htmleaf.com/html5/html5muban/201505091801.html 源代码地址 ht ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- thinkphp3.2.2有预览的多图上传
thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...
- iOS多线程与网络开发之小文件上传
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. /** 取得本地文件的MIMEType */ 2 - (void) getMIMEType { 3 // Socket 实现断点上传 4 5 //apa ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- Ajax 与文件上传
一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...
- 基于 Django的Ajax实现 文件上传
---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...
随机推荐
- php中CURL技术模拟登陆抓取数据实战,抓取某校教务处学生成绩。
这两天有基友要php中curl抓取教务处成绩的源码,用于微信公众平台的开发.下面笔者只好忍痛割爱了.php中CURL技术模拟登陆抓取数据实战,抓取沈阳工学院教务处学生成绩. 首先,教务处登录需要验证码 ...
- php中文编码
header("Content-type: text/html; charset=utf-8"); header('Location: http://www.example.com ...
- sirius的学习笔记(3)
毕业论文什么的终于搞完了,重拾我的python Creating the python skeleton project directory $ mkdir project $ cd project ...
- CPU/寄存器/内存
因为要了解多线程,自然少不了一些硬件知识的科普,我没有系统学习过硬件知识,仅仅是从书上以及网络上看来的,如果有错误请指出来. CPU,全名Central Processing Unit(中央处理器). ...
- 安装Oracle 11gR2,报错:[INS-06101] IP address of localhost could not be determined
安装Oracle 11gR2,报错:[INS-06101] IP address of localhost could not be determined 出现这种错误是因为主机名和/etc/host ...
- 一个matlab数字图像处理程序的解释
clc; %clc是清除command window里的内容 clear all; %clear是清除workspace里的变量 close all; %close all来关闭所有已经打开的图像窗口 ...
- 我终于忍不住喷一下某些书了,关于Java传引用的XX言论
凡是说Java对象传的是引用,简直一派胡言,尤其误导我这种Java初学者,更严重的是以前用过C++的Java初学者. 我们都知道Java建立对象一般都是需要这样的格式: Object obj = ne ...
- Xcode8和iOS10的适配问题
本文转自:http://www.jianshu.com/p/90d5323cf510 =================== 一.遇到的问题 1.权限以及相关设置 iOS10系统下调用系统相册.相机功 ...
- 关于Java(介绍)
基于Java官方指导文档,开展学习 Java是什么 Java 是编程语言,也是一个平台 特性 简单 可移植 面向对象 分布式运算高性能 健壮 安全 动态 体系结构中立 记忆宫殿:恋爱是件简单的事,但放 ...
- js中实现页面跳转
1.在本页中跳转到指定页面 1.window.location.href方式 <script language="javascript" type="text ...