JavaScript实现拖拽预览,AJAX小文件上传
2023-09-14 09:08:58 时间
本地上传,提前预览(图片。视频)
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(); })
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)); ?>
相关文章
- 17·灵魂前端工程师养成-JavaScript实现canvas画板
- 怎么使用 JavaScript 下载文件
- 使用 JavaScript 下载文件
- JavaScript SheetJS将 Html 表转换为 Excel 文件
- 【说站】javascript事件捕获是什么意思
- 前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
- 细说JavaScript闭包
- javascript异步编程之generator(生成器函数)与asnyc/await语法糖
- JavaScript中的Window.History返回对象的使用详解编程语言
- JAVASCRIPT使用ajax做异步上传文件详解编程语言
- Javascript实现页面跳转的几种方式详解编程语言
- 使javascript也能包含文件
- Javascript之文件操作
- javascript实现动态CSS换肤技术的脚本
- javascript按指定格式输出文件最后更新时间
- javascript读取图片文件的大小
- Javascript阻止javascript事件冒泡,获取控件ID值
- javascript线性渐变三
- javascript获取HTMl文件指定元素的代码
- javascript文件的同步加载与异步加载实现原理
- FireFox浏览器使用Javascript上传大文件
- js加载之使用DOM方法动态加载Javascript文件
- javascript验证上传文件的类型限制必须为某些格式
- javascript中动态加载js文件多种解决办法总结
- JavaScript表单通过正则表达式验证电话号码
- PHP动态生成javascript文件的2个例子
- javascript结合ajax读取txt文件内容
- 用javascript读取xml文件读取节点数据
- javascript批量修改文件编码格式的方法
- JavaScript验证电子邮箱的函数
- JavaScript判断文件上传类型的方法