手机版

Ajax上传图片的本质

时间:2021-09-16 来源:互联网 编辑:宝哥软件园 浏览:

1.图片上传到服务器。

2.后台将图片地址传到超文本标记语言页面,以图片形式展现。

3.后天将图片地址加入到投入表单中,表单处于隐藏状态。

4.前端删除图片,通过射流研究…操作,移除图片与表单数据。

5.图片上传表单,是单独的。不能嵌套在总的表单中。

6.牛逼的图片上传,可以对图片进行处理。压缩,加水印等。

7.点击btn,触发图片点击,图片改变之后,触发图片表单提交。

点击按钮

div id=' up _ status ' style=' display : none '[站外图片上传中……(2)]/div id=' up _ BTN ' class=' carousel-BTN ' span添加图片/span/div div id=' carousel-preview '/div上传表单

表单id='imageform' class='hidden '方法=' post ' enctype=' multipart/form-data ' action=' { sh 3360: u(' Goods/carousel upload ')} '输入id=' carousel-photo img ' type=' file ' name=' photo img '/form触发事件

$('#up_btn ').单击(function(){ $(' # carousel-photo img ').单击();});$('#carousel-photoimg ').on('change ',function(){ var status=$(' # up _ status ');var BTN=$(' # up _ BTN ');$('#imageform ').Ajax表单({ target : ' # carousel-preview ',beforeSubmit:function(){ //提交前,用加载的图片显示状态。show();BTN。hide();},success:function(){ //提交后,加载的图片显示状态。hide();BTN。show();},错误: function(){状态。hide();BTN。show();} }).submit();});后端验证与处理

函数转盘上传(){ $ path='上传/存储/商品/' .日期(' Ymd ').'/';if(!file _ exists($ path)){ mkdir($ path,0777,true);} $ extArr=数组(' jpg ',' png ',' gif ',' JPEG ');if(isset($_POST)和$ _ SERVER[' REQUEST _ METHoD ']==' POST '){ $ name=$ _ FILES[' photo img '][' name '];$ size=$ _ FILES[' photo img '][' size '];如果(空($name)){echo '请选择要上传的图片;退出;} $ ext=$ this-extend($ name);if(!in_array($ext,$ ExTRAR)){ echo '图片格式错误!退出;}if($size(2000*1024)){echo '图片大小不能超过“2M”;退出;}$image_name=time().兰特(100,999)。'.'。$ ext $ tmp=$ _ FILES[' photo img '][' tmp _ name '];if(move_uploaded_file($tmp,$path .$ image _ name)){ echo ' div class=' carousel-container ' onclick=' deleteImg(this);[站外图片上传中……(3)]输入名称='好img[]'值=' '。$path .$image_name .type='hidden'[站外图片上传中……(4)]/div ';}else{echo '上传出错了!}退出;}退出;}函数extend($ file _ name){ $ extend=path info($ file _ name);$ extend=strtolow($ extend[' extension ']);返回$ extend}删除图片文件

函数deleteImg(obj) {$(obj).移除();//ajax删除图片文件var src=$(obj).数据(“src”);$.ajax({type: 'POST ',URL : ' { sh :3360 u(' Goods/deleteImg ')} ',data: 'src='http: src,success : function(msg){ } }));}//删除图片,避免造成空间不足公共函数deleteImg(){ if(IS _ AJAX){ $ src=$ this-_ post(' src ');if(!unlink($src)){echo '文件{$src}删除失败;}else{echo '文件{$src}删除成功;}}}以上内容是小编给大家介绍的埃阿斯上传图片的本质的相关资料,希望对大家以上帮助!

版权声明:Ajax上传图片的本质是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。