本地上传,提前预览(图片,视频)

1.html中div标签预览显示,button标签触发上传事件。

  1. <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>
  2. <button onclick="xhr2()">ajax上传</button>

2.禁止浏览器打开文件行为

  1. document.addEventListener("drop",function(e){  //拖离
  2. e.preventDefault();
  3. })
  4. document.addEventListener("dragleave",function(e){  //拖后放
  5. e.preventDefault();
  6. })
  7. document.addEventListener("dragenter",function(e){  //拖进
  8. e.preventDefault();
  9. })
  10. document.addEventListener("dragover",function(e){  //拖来拖去
  11. e.preventDefault();
  12. })

3.拖拽,预览文件

  1. var box = document.getElementById('drop_area'); //拖拽区域
  2. box.addEventListener("drop",function(e){
  3. var fileList = e.dataTransfer.files; //获取文件对象
  4. //检测是否是拖拽文件到页面的操作
  5. if(fileList.length == 0){
  6. return false;
  7. }
  8. //拖拉图片到浏览器,可以实现预览功能
  9. //规定视频格式
  10. Array.prototype.S=String.fromCharCode(2);
  11. Array.prototype.in_array=function(e){
  12. var r=new RegExp(this.S+e+this.S);
  13. return (r.test(this.S+this.join(this.S)+this.S));
  14. };
  15. var video_type=["video/mp4","video/ogg"];
  16. //创建一个url连接,供src属性引用
  17. var fileurl = window.URL.createObjectURL(fileList[0]);
  18. if(fileList[0].type.indexOf('image') === 0){  //如果是图片
  19. var str="<img width='200px' height='200px' src='"+fileurl+"'>";
  20. document.getElementById('drop_area').innerHTML=str;
  21. }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频
  22. var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
  23. document.getElementById('drop_area').innerHTML=str;
  24. }else{ //其他格式,输出文件名
  25. //alert("不预览");
  26. var str="文件名字:"+fileList[0].name;
  27. document.getElementById('drop_area').innerHTML=str;
  28. }
  29. resultfile = fileList[0];
  30. },false);

4.ajax上传

  1. function xhr2(){
  2. var xhr = new XMLHttpRequest();//第一步
  3. //新建一个FormData对象
  4. var formData = new FormData(); //++++++++++
  5. //追加文件数据
  6. formData.append('file', resultfile);
  7. //post方式
  8. xhr.open('POST', 'xhr2.php'); //第二步骤
  9. //发送请求
  10. xhr.send(formData);  //第三步骤
  11. //ajax返回
  12. xhr.onreadystatechange = function(){ //第四步
  13.     if ( xhr.readyState == 4 && xhr.status == 200 ) {
  14.       console.log( xhr.responseText );
  15.     }
  16.   };
  17. //设置超时时间
  18. xhr.timeout = 10000;
  19. xhr.ontimeout = function(event){
  20.     alert('请求超时!');
  21.   }
  22. }

5.php保存文件

    1. <?php
    2. print_r($_FILES["file"]);
    3. $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数
    4. move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));
    5. ?>

JavaScript实现拖拽预览,AJAX小文件上传的更多相关文章

  1. 基于Bootstrap 3可预览的HTML5文件上传插件

    前端常用资源地址: http://www.htmleaf.com/ http://www.htmleaf.com/html5/html5muban/201505091801.html 源代码地址 ht ...

  2. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  3. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  4. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  5. thinkphp3.2.2有预览的多图上传

    thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...

  6. iOS多线程与网络开发之小文件上传

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. /** 取得本地文件的MIMEType */ 2 - (void) getMIMEType { 3 // Socket 实现断点上传 4 5 //apa ...

  7. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  8. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  9. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

随机推荐

  1. php中CURL技术模拟登陆抓取数据实战,抓取某校教务处学生成绩。

    这两天有基友要php中curl抓取教务处成绩的源码,用于微信公众平台的开发.下面笔者只好忍痛割爱了.php中CURL技术模拟登陆抓取数据实战,抓取沈阳工学院教务处学生成绩. 首先,教务处登录需要验证码 ...

  2. php中文编码

    header("Content-type: text/html; charset=utf-8"); header('Location: http://www.example.com ...

  3. sirius的学习笔记(3)

    毕业论文什么的终于搞完了,重拾我的python Creating the python skeleton project directory $ mkdir project $ cd project ...

  4. CPU/寄存器/内存

    因为要了解多线程,自然少不了一些硬件知识的科普,我没有系统学习过硬件知识,仅仅是从书上以及网络上看来的,如果有错误请指出来. CPU,全名Central Processing Unit(中央处理器). ...

  5. 安装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 ...

  6. 一个matlab数字图像处理程序的解释

    clc; %clc是清除command window里的内容 clear all; %clear是清除workspace里的变量 close all; %close all来关闭所有已经打开的图像窗口 ...

  7. 我终于忍不住喷一下某些书了,关于Java传引用的XX言论

    凡是说Java对象传的是引用,简直一派胡言,尤其误导我这种Java初学者,更严重的是以前用过C++的Java初学者. 我们都知道Java建立对象一般都是需要这样的格式: Object obj = ne ...

  8. Xcode8和iOS10的适配问题

    本文转自:http://www.jianshu.com/p/90d5323cf510 =================== 一.遇到的问题 1.权限以及相关设置 iOS10系统下调用系统相册.相机功 ...

  9. 关于Java(介绍)

    基于Java官方指导文档,开展学习 Java是什么 Java 是编程语言,也是一个平台 特性 简单 可移植 面向对象 分布式运算高性能 健壮 安全 动态 体系结构中立 记忆宫殿:恋爱是件简单的事,但放 ...

  10. js中实现页面跳转

    1.在本页中跳转到指定页面 1.window.location.href方式    <script language="javascript" type="text ...