Ajax 이미지 업로드 소개

이 글은 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();
});
$('#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 &#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('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}删除成功";
}
}
}

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

관련 권장 사항:

AJAX는 post를 사용하여 xml 형식의 데이터를 보내 데이터를 받습니다.

Ajax는 JS 코드를 통해 자동으로 양식 요소 값을 얻습니다.

위 내용은 Ajax 이미지 업로드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!