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

来源：互联网发布：c语言程序编程编辑：程序博客网时间：2024/06/05 06:19

    <!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