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

bchz521

于 2017-07-21 17:11:36 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/bu2543567472/article/details/75667590

版权

<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post">

本地上传，提前预览（图片，视频）
1.html中div标签预览显示，button标签触发上传事件。

<div class="dp-highlighter bg_html"><div class="bar"><div class="tools">[html] <a href="#" class="ViewSource" title="view plain" οnclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a> <a href="#" class="CopyToClipboard" title="copy" οnclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 465px; top: 564px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" name="ZeroClipboardMovie_1" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=18&height=18" wmode="transparent" width="18" height="18" align="middle"></div> <a href="#" class="PrintSource" title="print" οnclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a><a href="#" class="About" title="?" οnclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-xml"><li class="alt"><div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>  </li><li class=""><button onclick="xhr2()">ajax上传</button>  </li></ol></div><pre name="code" class="html" style="display: none;"><div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div>
<button οnclick="xhr2()">ajax上传</button></pre> 
2.禁止浏览器打开文件行为 


<div class="dp-highlighter bg_html"><div class="bar"><div class="tools">[html] <a href="#" class="ViewSource" title="view plain" οnclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a> <a href="#" class="CopyToClipboard" title="copy" οnclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 465px; top: 739px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" name="ZeroClipboardMovie_2" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=18&height=18" wmode="transparent" width="18" height="18" align="middle"></div> <a href="#" class="PrintSource" title="print" οnclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a><a href="#" class="About" title="?" οnclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-xml"><li class="alt">document.addEventListener("drop",function(e){  //拖离   </li><li class="">    e.preventDefault();      </li><li class="alt">})  </li><li class="">document.addEventListener("dragleave",function(e){  //拖后放   </li><li class="alt">    e.preventDefault();      </li><li class="">})  </li><li class="alt">document.addEventListener("dragenter",function(e){  //拖进  </li><li class="">    e.preventDefault();      </li><li class="alt">})  </li><li class="">document.addEventListener("dragover",function(e){  //拖来拖去    </li><li class="alt">    e.preventDefault();      </li><li class="">})  </li></ol></div><pre name="code" class="html" style="display: none;">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();
})</pre>
 

3.拖拽,预览文件


<div class="dp-highlighter bg_html"><div class="bar"><div class="tools">[html] <a href="#" class="ViewSource" title="view plain" οnclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a> <a href="#" class="CopyToClipboard" title="copy" οnclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 465px; top: 1094px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" name="ZeroClipboardMovie_3" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=18&height=18" wmode="transparent" width="18" height="18" align="middle"></div> <a href="#" class="PrintSource" title="print" οnclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a><a href="#" class="About" title="?" οnclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-xml"><li class="alt">var box = document.getElementById('drop_area'); //拖拽区域     </li><li class="">box.addEventListener("drop",function(e){           </li><li class="alt">    var fileList = e.dataTransfer.files; //获取文件对象    </li><li class="">    //检测是否是拖拽文件到页面的操作            </li><li class="alt">    if(fileList.length == 0){                </li><li class="">        return false;            </li><li class="alt">    }             </li><li class="">    //拖拉图片到浏览器，可以实现预览功能    </li><li class="alt">    //规定视频格式  </li><li class="">    Array.prototype.S=String.fromCharCode(2);  </li><li class="alt">    Array.prototype.in_array=function(e){  </li><li class="">        var r=new RegExp(this.S+e+this.S);  </li><li class="alt">        return (r.test(this.S+this.join(this.S)+this.S));  </li><li class="">    };  </li><li class="alt">    var video_type=["video/mp4","video/ogg"];  </li><li class="">      </li><li class="alt">    //创建一个url连接,供src属性引用  </li><li class="">    var fileurl = window.URL.createObjectURL(fileList[0]);                </li><li class="alt">    if(fileList[0].type.indexOf('image') === 0){  //如果是图片  </li><li class="">        var str="<img width='200px' height='200px' src='"+fileurl+"'>";  </li><li class="alt">        document.getElementById('drop_area').innerHTML=str;                   </li><li class="">    }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                    </li><li class="alt">        var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";  </li><li class="">        document.getElementById('drop_area').innerHTML=str;        </li><li class="alt">    }else{ //其他格式，输出文件名  </li><li class="">        //alert("不预览");  </li><li class="alt">        var str="文件名字:"+fileList[0].name;  </li><li class="">        document.getElementById('drop_area').innerHTML=str;      </li><li class="alt">    }         </li><li class="">    resultfile = fileList[0];             </li><li class="alt">},false);  </li></ol></div><pre name="code" class="html" style="display: none;">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);</pre> 
4.ajax上传


<div class="dp-highlighter bg_html"><div class="bar"><div class="tools">[html] <a href="#" class="ViewSource" title="view plain" οnclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a> <a href="#" class="CopyToClipboard" title="copy" οnclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 465px; top: 1791px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" name="ZeroClipboardMovie_4" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&width=18&height=18" wmode="transparent" width="18" height="18" align="middle"></div> <a href="#" class="PrintSource" title="print" οnclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a><a href="#" class="About" title="?" οnclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-xml"><li class="alt">function xhr2(){  </li><li class="">    var xhr = new XMLHttpRequest();//第一步  </li><li class="alt">    //新建一个FormData对象  </li><li class="">    var formData = new FormData(); //++++++++++  </li><li class="alt">    //追加文件数据  </li><li class="">    formData.append('file', resultfile);  </li><li class="alt">    //post方式  </li><li class="">    xhr.open('POST', 'xhr2.php'); //第二步骤  </li><li class="alt">    //发送请求  </li><li class="">    xhr.send(formData);  //第三步骤  </li><li class="alt">    //ajax返回  </li><li class="">    xhr.onreadystatechange = function(){ //第四步  </li><li class="alt">　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {  </li><li class="">　　　　　　console.log( xhr.responseText );        </li><li class="alt">　　　　}  </li><li class="">　　};  </li><li class="alt">    //设置超时时间  </li><li class="">    xhr.timeout = 10000;  </li><li class="alt">    xhr.ontimeout = function(event){  </li><li class="">　　　　alert('请求超时！');  </li><li class="alt">　　}           </li><li class="">}  </li></ol></div><pre name="code" class="html" style="display: none;">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('请求超时！');
　　}
}</pre> 
5.php保存文件


<div class="dp-highlighter bg_html"><div class="bar"><div class="tools">[html] <a href="#" class="ViewSource" title="view plain" οnclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plain</a> <a href="#" class="CopyToClipboard" title="copy" οnclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 465px; top: 2326px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" name="ZeroClipboardMovie_5" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=5&width=18&height=18" wmode="transparent" width="18" height="18" align="middle"></div> <a href="#" class="PrintSource" title="print" οnclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a><a href="#" class="About" title="?" οnclick="dp.sh.Toolbar.Command('About',this);return false;" target="_blank">?</a></div></div><ol start="1" class="dp-xml"><li class="alt"><?php  </li><li class="">    print_r($_FILES["file"]);  </li><li class="alt">    $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数  </li><li class="">    move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));  </li><li class="alt">?>  </li></ol></div><pre name="code" class="html" style="display: none;"><?php
 print_r($_FILES["file"]);
 $name = $_FILES["file"]["name"]; //中文可能乱码使用iconv函数
 move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));
?></pre> 
 

 


</div>