Introduction to Ajax uploading images-JS Tutorial-php.cn

Introduction to Ajax uploading images

不言

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

Original

1591 people have browsed it

This article mainly introduces the relevant information about the nature of Ajax uploaded images. Friends who need it can refer to

1. The image is uploaded to the server.

2. The background transfers the image address to the html page and displays it in the form of an image.

3. Add the image address to the input form the day after tomorrow, and the form will be hidden.

4. The front-end deletes images and removes images and form data through js operations.

5. The image upload form is separate. Cannot be nested in the overall form.

6. Upload awesome pictures and process them. Compression, watermarking, etc.

7. Click btn to trigger image click. After the image is changed, image form submission is triggered.

Click the button

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

Copy after login

##Upload form

<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>

Copy after login

Trigger event

$("#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();
});

Copy after login

Backend verification and processing

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;
}

Copy after login

Delete picture files

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}删除成功";
}
}
}

Copy after login

That’s it The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

AJAX uses post to send data in xml format to receive data

Automatically obtain the form through JS code in Ajax Element value

The above is the detailed content of Introduction to Ajax uploading images. For more information, please follow other related articles on the PHP Chinese website!