Einführung in das Hochladen von Bildern mit Ajax

Dieser Artikel stellt hauptsächlich die relevanten Informationen über die Art der von Ajax hochgeladenen Bilder vor. Freunde, die sie benötigen, können sich auf

1 beziehen . Das Bild wird auf den Server hochgeladen.

2. Der Hintergrund überträgt die Bildadresse auf die HTML-Seite und zeigt sie in Form eines Bildes an.

3. Fügen Sie übermorgen die Bildadresse zum Eingabeformular hinzu, und das Formular wird ausgeblendet.

4. Das Frontend löscht Bilder und entfernt Bilder und Formulardaten durch js-Operationen.

5. Das Bild-Upload-Formular ist separat. Kann nicht im Gesamtformular verschachtelt werden.

6. Toller Bild-Upload, man kann die Bilder bearbeiten. Komprimierung, Wasserzeichen usw.

7. Klicken Sie auf BTN, um einen Bildklick auszulösen. Nachdem das Bild geändert wurde, wird die Übermittlung des Bildformulars ausgelöst.

Klicken Sie auf die Schaltfläche

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

Formular hochladen

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

Trigger-Ereignis

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

Backend-Verifizierung und -Verarbeitung

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

Bilddateien löschen

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

Das war's Der gesamte Inhalt dieses Artikels soll für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

AJAX verwendet Post, um Daten im XML-Format zu senden und Daten zu empfangen

Erhalten Sie das Formular automatisch über JS-Code im Ajax-Elementwert

Das obige ist der detaillierte Inhalt vonEinführung in das Hochladen von Bildern mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!