Ajax上传图片的本质

前端技术 2023/08/07 AJAX

1.图片上传到服务器。

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

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

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

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

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

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

点击按钮

<div id=\"up_status\" style=\"display:none\">[站外图片上传中……(2)]</div>
<div id=\"up_btn\" class=\"carousel-btn\">
<span>添加图片</span> 
</div>
<div id=\"carousel-preview\"></div>

上传表单

<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 \'<div class=\"carousel-container\" onclick=\"deleteImg(this);\">
[站外图片上传中……(3)]
<input name=\"goodsimg[]\" value=\"\'.$path.$image_name.\'\" type=\"hidden\">
[站外图片上传中……(4)]
</div>\';
}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上传图片的本质的相关资料，希望对大家以上帮助！

本文地址：https://www.stayed.cn/item/423

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案