Ajax上传图片的本质

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}删除成功；}}}以上内容是小编给大家介绍的埃阿斯上传图片的本质的相关资料，希望对大家以上帮助！