Ajax 이미지 업로드 소개-JS 튜토리얼-php.cn

Ajax 이미지 업로드 소개

不言

풀어 주다： 2018-07-02 16:26:40

원래의

1592명이 탐색했습니다.

이 글은 Ajax 업로드 이미지의 성격에 대한 관련 정보를 주로 소개합니다. 필요한 친구들이 참고하면 됩니다.

1. 이미지를 서버에 업로드합니다.

2. 배경은 이미지 주소를 html 페이지로 전송하여 이미지 형태로 표시합니다.

3. 내일 모레 입력 폼에 이미지 주소를 추가하시면 폼이 숨겨집니다.

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(&#39;Goods/carouselUpload&#39;)}">
<input id="carousel-photoimg" type="file" name="photoimg">
</form>

로그인 후 복사

이벤트 발생

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

로그인 후 복사

백엔드 검증 및 처리

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

로그인 후 복사

이미지 파일 삭제

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

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!