打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jQuery,ajax文件上传的实现 | CoCo的小黑屋

jQuery,ajax文件上传的实现

 

现在做网站,你不用ajax你都不好意思和人家打招呼。最近在做的一个项目,需要使用ajax方式进行文件的上传。但众所周知,ajax本身貌似本身并没有办法读取本地的文件形成二进制流上传到服务器,况且即使不用ajax传统的表单也需要定义“multipart/form-data”这样的方式。于是到处到找jQuery的ajax文件上传插件,我的需求是简单,无论接口还是功能。还真给找到一个:http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

其实原理很简单,和咱想的一样,这个插件就是虚拟了一个iframe,在iframe中创建了一个文件上传的标准表单,然后填入文件,post这个form,获取返回的数据给调用者。服务器端的编程和普通上传没有区别,只是注意将上传结果使用json或者xml的格式返回就好了。

使用非常简单,假设本地的上传file input框的ID是res_file,那么只要如下调用:

123456789101112131415
$.ajaxFileUpload({  url:'upload.php',//服务器端程序  secureuri:false,  fileElementId:'res_file',//input框的ID  dataType: 'json',//返回数据类型  beforeSend:function(){//上传前需要处理的工作,如显示Loading...  },  success: function (data, status){//上传成功    if(data.success == 1){      //从data中获取数据,进行处理    } else{      alert('上传失败!');    }  }});

服务器端收到的post的文件ID为res_file。如果用json格式,服务器端处理完上传逻辑后输出json格式的数据,可以在success函数中读取,并进行相应操作,如预览上传的图片和flash等。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
jQuery.getJSON()
jquery ajax请求成功,返回了数据,但是不进success的问题
第10章 Ajax 教学设计
反向ajax
jquery的ajax和getJson跨域获取json数据
服务器与客户端数据交互 (json)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服