做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax:
得到file的val,再post过去…
等真正实现的时候才发现,根本行不通。
于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。
AjaxFileUpload
这个插件的原理是创建隐藏的表单和iframe,然后用JS去提交,获得返回值。
语法
$.ajaxFileUpload([options])
参数说明
url 上传处理程序地址。
fileElementId 需要上传的文件域的ID,即的ID。
secureuri 是否启用安全提交,默认为false。
dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
error 提交失败自动执行的处理函数。
data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
type 当要提交自定义参数时,这个参数要设置成post
使用方法
引入jQuery与ajaxFileUpload插件(由api中心强力提供)
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">扩展HTML代码
<td height="52" class="inputContent" ><div align="center">附件1 <input type="file" name="upload_file" id="ss_upload_file1"></td> <td colspan="3"><input type="button" name="Submit3" value="上 传" class="button" id="ss_file_upload"></td>JS代码
$("#ss_file_upload").click(function(){ $.ajaxFileUpload({ url:'doajaxfileupload.php',//请求地址 secureuri:false,//是否需要安全协议 fileElementId:'ss_upload_file1',//file的ID dataType: 'text',//返回值类型,一般为json success: function(img_data1)//成功后执行 { $(ss_file1_url).attr("value",img_data1); alert("上传成功"); }, error:function(img_data1,status,e){ alert("上传失败"); } }) })PHP代码
后台就是进行上传操作啦,因为是课程设计所以我将图片上传到了七牛云存储中。
如何上传到七牛中?
<"status"=>'',"url"=>''); require_once("qiniu/io.php"); require_once("qiniu/rs.php"); $bucket = "";//你的bucket $key1 = $_FILES["upload_file"]["name"] ; $accessKey = '';//AK $secretKey = '';//SK Qiniu_SetKeys($accessKey, $secretKey); $putPolicy = new Qiniu_RS_PutPolicy($bucket); $upToken = $putPolicy->Token(null); $putExtra = new Qiniu_PutExtra(); $putExtra->Crc32 = 1; list($ret, $err) = Qiniu_PutFile($upToken, $key1,$_FILES["upload_file"]["tmp_name"], $putExtra); $url='bucket域名'.$key1; if ($_FILES["upload_file"]["error"] > 0){ $file_infor["status"] = 'error'; } else{ $file_infor["status"] = 'success'; $file_infor["url"] = $url; } echo $url; "htmlcode">array ( ‘upload_file' => array ( ‘name' => ‘733626970332872971.jpg', ‘type' => ‘image/jpeg', ‘tmp_name' => ‘C:\\Windows\\Temp\\phpF203.tmp', ‘error' => 0, ‘size' => 210744, ), )这样前台就可以接收到上传图片之后的url值并进行显示操作了。
一般来说,AjaxFileUpload的返回类型是json格式,可是在测试的时候前台一直无法解析json数据,所以无解之后就换成text数据了。
错误提示
1.Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘handleError'
这是因为高版本的jQuery中取消了handleError方法,在ajaxfileupload.js中加入该方法就可以啦。 ;)
handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context "ajaxError", [xhr, s, e] ); } }2.success: function(data)中data为空值
应该是json数据的问题,我的解决方法是设置返回数据的类型是 text,用alert(data +”:” + data.length); 观察返回的数据是否有效。
3.一直跳转到error方法中
当执行if(type==”json”) eval(“data = “+data);会抛出异常,导致在处理异常的时候将status = “error” 因此一直执行error方法。
将ajaxfileupload.js中uploadHttpData: function( r, type ) 方法的 eval(“data = “+data+” “)改为 eval(“data = \” “+data+” \” “);
4.SyntaxError: syntax error错误
检查处理提交操作的服务器后台处理程序是否存在语法错误。
5.change第二次失效
绑定change事件,实现选择图片后自动上传,但是触发一次change事件后,下次就不会再触发change事件。
原因:由于ajaxFileUpload把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了。
解决方法:在 $.ajaxFileUpload({option})中的回调函数里 重新绑定change事件。
$("#upload_file").change(function(){ UploadImg(); }); UploadImg = function() { $(window).bind('beforeunload',function(){return '正在上传,确定离开此页面吗?';}); $('#loading').attr('style','display:block;') $.ajaxFileUpload({ url:'upload_ajax.php', secureuri:false, fileElementId:'upload_file', dataType: 'text', success: function(data) { $('#loading').attr('style','display:none;'); if(data == 0){ $("body").overhang({ type: "error", message: "上传失败,CODE:00020" }); } else if(data == 1){ $("body").overhang({ type: "success", message: "上传成功!" }); setTimeout(function(){ window.location.reload(); },1000); } else{ $("body").overhang({ type: "error", message: "格式错误,仅支持jpg,png,gif" }); } $(window).unbind('beforeunload'); $("#upload_file").change(function () { UploadImg(); }); }, error:function(data,status,e){ $("body").overhang({ type: "error", message: "上传失败,CODE:00031" }); } }) }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。