Ajax如何实现上传图片

这篇文章主要为大家展示了"Ajax如何实现上传图片"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"Ajax如何实现上传图片"这篇文章吧。

1.图片上传到服务器。

2.后台将图片地址传到html页面，以图片形式展现。

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

4.前端删除图片，通过js操作，移除图片与表单数据。

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

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

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

点击按钮

[站外图片上传中……(2)]
添加图片 

上传表单

触发事件

$("#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 '
[站外图片上传中……(3)][站外图片上传中……(4)]
';}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如何实现上传图片"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！