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

最新推荐文章于 2016-09-22 10:13:24 发布

我很满意

最新推荐文章于 2016-09-22 10:13:24 发布

阅读量401

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/myhuashengmi/article/details/52247304

版权

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本地上传，提前预览（图片，视频）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>xhr2</title>
</head>
<body>
<div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>
<button onclick="xhr2()">ajax上传</button>
<script>
    //拖拽上传开始
    //1.禁止浏览器打开文件行为
    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();
    })
    //2.拖拽,预览文件
    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);

    //3.ajax上传

    function xhr2(){
        var xhr = new XMLHttpRequest();//第一步
        //新建一个FormData对象
        var formData = new FormData(); //++++++++++
        //追加文件数据
        formData.append('file', resultfile);
        //post方式
        xhr.open('POST', 'upload.php'); //第二步骤
        //发送请求
        xhr.send(formData);  //第三步骤
        //ajax返回
        xhr.onreadystatechange = function(){ //第四步
            　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
            　　　　　　//console.log( xhr.responseText );
                        alert('上传完成')
    　　　　}
    　　};
        //设置超时时间
        xhr.timeout = 10000;
        xhr.ontimeout = function(event){
            　　　　alert('请求超时！');
    　　}
    }
</script>
</body>
</html>

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

我很满意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现拖拽预览，AJAX小文件上传

本地上传，提前预览（图片，视频）<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>xhr2</title></head><body><div id="drop_area" style="bo...
复制链接

扫一扫