ajax 实现文件上传
来源:互联网 发布:赵薇事件的始末 知乎 编辑:程序博客网 时间:2024/05/12 03:54
JS原生方式实现
首先我先创建一个form表单,代码如下:
<form action="" id="form"> 用户名:<input type="text" name="user"/></br> 密码 :<input type="password" name="pass" /></br> 性别 :<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 头像 :<input type="file" id="file" name="file"/></br> <button id="btn" type="button">提交</button></form><div class="con"></div>
创建完成后,首先我们要先拿到用户从本上传的图片的信息,代码如下
var imgs=[];//存储图片链接 //为文件上传添加change事件 var fileM=document.querySelector("#file"); $("#file").on("change",function(){ console.log(fileM.files); //获取文件对象,files是文件选取控件的属性,存储的是文件选取控件选取的文件对象,类型是一个数组 var fileObj=fileM.files[0]; //创建formdata对象,formData用来存储表单的数据,表单数据时以键值对形式存储的。 var formData=new FormData(); formData.append('file',fileObj);
这里的formData就是我们现在要的存储文件信息的对象,然后我们需要把它用ajax请求提交给后台:
//创建ajax对象 var ajax=new XMLHttpRequest(); //发送POST请求 ajax.open("POST","http://localhost/phpClass/file-upload/move_file.php",true); ajax.send(formData); ajax.onreadystatechange=function(){ if (ajax.readyState == 4) { if (ajax.status>=200 &&ajax.status<300||ajax.status==304) { console.log(ajax.responseText); var obj=JSON.parse(ajax.responseText); alert(obj.msg); if(obj.err == 0){、 //上传成功后自动动创建img标签放在指定位置 var img =$("<img src='"+obj.msg+"' alt='' />"); $(".con").append(img); imgs.push(obj.msg); }else{ alert(obj.msg); } } } }});
然后我们请求成功后,后台肯定要做出相应的处理,并且把图片存到指定的文件夹里,所以相应的PHP应该完成这些操作:
//解决跨域问题header("Access-Control-Allow-Origin:*");//说明向前台返回的数据类型为JSONheader("Content-type:text/json");//$_FILES超全局变量存储是文件数据,是一个关联数组 $fileObj=$_FILES['file']; //接收文件
jquery 实现ajax文件上传
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); }, error: function (returndata) { alert(returndata); } });}
阅读全文
0 0
- Ajax实现文件上传
- AJAX文件上传实现
- ajax实现文件上传
- Ajax实现文件上传
- ajax实现文件上传
- ajax实现文件上传
- ajax实现上传文件
- ajax 实现文件上传
- 文件上传+ajax 实现表单文件上传
- ajax上传文件进度条实现
- 文件上传iframe实现ajax
- jquery实现ajax文件上传
- JS Ajax实现文件上传
- JavaWEB+Ajax实现文件上传
- ajax无法实现文件上传
- jquery AJAX 实现文件上传
- Ajax方式实现文件上传
- Ajax实现文件异步上传
- dokuwiki:安装与配置
- mysql数据类型
- 书生云王东临:从大型机到超融合 细数企业IT架构的四代技术
- 大的字符串的中数据转化为数字,字符数值的提取转化,atoi();
- 常用postgresql数据库语句
- ajax 实现文件上传
- SAP/DB LUW
- 欢迎使用CSDN-markdown编辑器
- 使用ViewFlipper写自动上下滚动的数据
- ElementUI使用第三方图标库Iconfont
- 阻抗匹配
- MacOSX apache 添加了HTTPs本地域名后不能访问,无错误提示,无法连接
- c语言Socket相关函数简介
- Linux查看系统开机时间