JavaScript实现拖拽预览,AJAX小文件上传

转载 2016年08月30日 13:41:01

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

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小文件上传

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件。 将图片拖拽到此 ajax上传 2.禁止浏览器打开文件行为 document.addEventL...
  • Zph1234
  • Zph1234
  • 2016年01月10日 22:14
  • 1895

用javascript实现图片上传并预览

最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome,FF,IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月28日 17:34
  • 6024

支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput的ajax异步上传

ajax上传,fileinput插件,异步上传,预览上传,多文件上传
  • sangjinchao
  • sangjinchao
  • 2016年08月19日 14:05
  • 1442

js实现多图上传和预览(包含表单上传、ajax上传)

包含的知识点有:(仅考虑手机端,pc兼容性不清) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新) 3.创建元素的简单封装 4.ajax简单封装 5.手机端标准html书写 ...
  • u011500781
  • u011500781
  • 2016年06月23日 12:01
  • 2370

菜鸟学JS(一)——上传图片之上传前预览图片

上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出...
  • liushuijinger
  • liushuijinger
  • 2013年03月25日 09:38
  • 14758

H5实现多图片预览上传,可点击可拖拽控件介绍

在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用。 先看看他的样式: ...
  • weixin_36380516
  • weixin_36380516
  • 2017年04月22日 10:23
  • 4044

简单封装一个上传插件——支持拖拽和预览

最近碰到一个需求。需要上传很多图片,但是又不是批量上传。场景是这样的。我需要从数据表中查出一行一行的数据,每一行都需要更新一个对应的图片。天才需求方不喜欢批量上传,因为需要让他们给每个图片命名。 原...
  • u011061889
  • u011061889
  • 2017年08月21日 21:31
  • 398

HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一)

上传基本是项目中经常出现的,一般采用: 1、form提交  2、flash 3、html5 form提交会刷新页面,很难做到异步上传;flash可能是用得比较多了,因为可以兼顾到几乎所有的浏览器,我之...
  • lmj623565791
  • lmj623565791
  • 2014年06月16日 23:17
  • 14796

支持多文件上传,预览,拖拽的基于bootstrap的上传插件fileinput

参考: http://www.cnblogs.com/landeanfen/p/5007400.html   一篇详细的包括后台C#的文章 http://plugins.krajee.com/...
  • qq_33769914
  • qq_33769914
  • 2017年04月08日 17:47
  • 2030

ajax 实现拖拽 上传

1.html中div标签预览显示,button标签触发上传事件。 div  id="drop_area" style="border:3px dashed silver;wi...
  • tiedanzi
  • tiedanzi
  • 2016年07月27日 20:50
  • 145
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现拖拽预览,AJAX小文件上传
举报原因:
原因补充:

(最多只允许输入30个字)