关于Ajax上传图片的介绍-tutorial js-php.cn

关于Ajax上传图片的介绍

不言

Lepaskan： 2018-07-02 16:26:40

asal

1592 orang telah melayarinya

这篇文章主要介绍了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>

Salin selepas log masuk

上传表单

<form id="imageform" class="hidden" method="post" enctype="multipart/form-data" action="{sh::U(&#39;Goods/carouselUpload&#39;)}">
<input id="carousel-photoimg" type="file" name="photoimg">
</form>

Salin selepas log masuk

触发事件

$("#up_btn").click(function () {
$("#carousel-photoimg").click();
});
$(&#39;#carousel-photoimg&#39;).on(&#39;change&#39;, function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: &#39;#carousel-preview&#39;, 
beforeSubmit:function(){ // 提交前，用加载的图片显示
status.show();
btn.hide();
}, 
success:function(){ // 提交后，加载的图片显示
status.hide();
btn.show();
}, 
error:function(){
status.hide();
btn.show();
} }).submit();
});

Salin selepas log masuk

后端验证与处理

function carouselUpload() {
$path = "Uploads/Store/goods/".date("Ymd").&#39;/&#39;;
if (!file_exists($path)) {
mkdir($path, 0777, true);
}
$extArr = array("jpg", "png", "gif","jpeg");

if(isset($_POST) and $_SERVER[&#39;REQUEST_METHOD&#39;] == "POST"){
$name = $_FILES[&#39;photoimg&#39;][&#39;name&#39;];
$size = $_FILES[&#39;photoimg&#39;][&#39;size&#39;];

if(empty($name)){
echo &#39;请选择要上传的图片&#39;;
exit;
}
$ext = $this->extend($name);
if(!in_array($ext,$extArr)){
echo &#39;图片格式错误！&#39;;
exit;
}
if($size>(2000*1024)){
echo &#39;图片大小不能超过2M&#39;;
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES[&#39;photoimg&#39;][&#39;tmp_name&#39;];
if(move_uploaded_file($tmp, $path.$image_name)){
echo &#39;<p class="carousel-container" onclick="deleteImg(this);">
[站外图片上传中……(3)]
<input name="goodsimg[]" value="&#39;.$path.$image_name.&#39;" type="hidden">
[站外图片上传中……(4)]
</p>&#39;;
}else{
echo &#39;上传出错了！&#39;;
}
exit;
}
exit;
}
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}

Salin selepas log masuk

删除图片文件

function deleteImg(obj) {
$(obj).remove();
// ajax 删除图片文件
var src = $(obj).data(&#39;src&#39;);
$.ajax({
type: "POST",
url: "{sh::U(&#39;Goods/deleteImg&#39;)}",
data: "src="+src,
success: function(msg){}
});
}
// 删除图片，避免造成空间不足
public function deleteImg() {
if (IS_AJAX) {
$src = $this->_post(&#39;src&#39;);
if(!unlink($src))
{
echo "文件{$src}删除失败";
}
else
{
echo "文件{$src}删除成功";
}
}
}

Salin selepas log masuk

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！