这篇文章主要介绍了ajax上传图片的本质的相关资料,需要的朋友可以参考下
1.图片上传到服务器。
2.后台将图片地址传到html页面，以图片形式展现。
3.后天将图片地址加入到input表单中，表单处于隐藏状态。
4.前端删除图片，通过js操作，移除图片与表单数据。
5.图片上传表单，是单独的。不能嵌套在总的表单中。
6.牛逼的图片上传，可以对图片进行处理。压缩，加水印等。
7.点击btn，触发图片点击，图片改变之后，触发图片表单提交。
点击按钮
<p id="up_status" style="display:none">[站外图片上传中……(2)]</p><p id="up_btn" class="carousel-btn"><span>添加图片</span> </p><p id="carousel-preview"></p>
上传表单
<form id="imageform" class="hidden" method="post" enctype="multipart/form-data" action="{sh::u('goods/carouselupload')}"><input id="carousel-photoimg" type="file" name="photoimg"></form>
触发事件
$("#up_btn").click(function () {$("#carousel-photoimg").click();});$('#carousel-photoimg').on('change', function(){var status = $("#up_status");var btn = $("#up_btn");$("#imageform").ajaxform({target: '#carousel-preview', beforesubmit:function(){ // 提交前，用加载的图片显示status.show();btn.hide();}, success:function(){ // 提交后，加载的图片显示status.hide();btn.show();}, error:function(){status.hide();btn.show();} }).submit();});
后端验证与处理
function carouselupload() {$path = "uploads/store/goods/".date("ymd").'/';if (!file_exists($path)) {mkdir($path, 0777, true);}$extarr = array("jpg", "png", "gif","jpeg");if(isset($_post) and $_server['request_method'] == "post"){$name = $_files['photoimg']['name'];$size = $_files['photoimg']['size'];if(empty($name)){echo '请选择要上传的图片';exit;}$ext = $this->extend($name);if(!in_array($ext,$extarr)){echo '图片格式错误！';exit;}if($size>(2000*1024)){echo '图片大小不能超过2m';exit;}$image_name = time().rand(100,999).".".$ext;$tmp = $_files['photoimg']['tmp_name'];if(move_uploaded_file($tmp, $path.$image_name)){echo '<p class="carousel-container" onclick="deleteimg(this);">[站外图片上传中……(3)]<input name="goodsimg[]" value="'.$path.$image_name.'" type="hidden">[站外图片上传中……(4)]</p>';}else{echo '上传出错了！';}exit;}exit;}function extend($file_name){$extend = pathinfo($file_name);$extend = strtolower($extend["extension"]);return $extend;}
删除图片文件
function deleteimg(obj) {$(obj).remove();// ajax 删除图片文件var src = $(obj).data('src');$.ajax({type: "post",url: "{sh::u('goods/deleteimg')}",data: "src="+src,success: function(msg){}});}// 删除图片，避免造成空间不足public function deleteimg() {if (is_ajax) {$src = $this->_post('src');if(!unlink($src)){echo "文件{$src}删除失败";}else{echo "文件{$src}删除成功";}}}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
ajax使用post发送数据xml格式接受数据
ajax中通过js代码自动获取表单元素值
以上就是关于ajax上传图片的介绍的详细内容。