Verwenden Sie Ajax+php, um Dateien hochzuladen
Theoretisch gibt es viele solcher Plug-Ins zum Hochladen von Dateien/Bildern, aber bei der Verwendung treten immer noch verschiedene Probleme auf, z. B. Kompatibilitätsprobleme, Hintergrundprobleme usw. Da ich die Plug-Ins anderer Leute nicht verwenden kann Räder gut, ich werde selbst eines bauen.
In diesem Artikel werden jq.ajax und PHP zur Implementierung der Upload-Funktion verwendet. Der Front-End-Code ist im Allgemeinen nicht derselbe Informationen zur Bedienung finden Sie in der Dokumentation in Ihrer Sprache.
Schauen wir uns zunächst die Renderings an. Die gesamte Upload-Oberfläche sieht so aus: Demo ansehen
Gesamtidee:
1. Eingabeeinstellung Typ=Datei, ID=Datei, Stileinstellung Deckkraft:0, Position:absolut erstellen
2 und Z-Index ist größer als Datei
3. Erstellen Sie ein FormData-Objekt und fügen Sie die Datei als Daten in FormData ein
4. Erstellen Sie Ajax, senden Sie die FormData-Daten an upload.php und hören Sie zu zum Fortschrittsereignis von Ajax, geben Sie den Upload-Fortschritt in Echtzeit zurück
5. Geben Sie die Antwort des Servers auf der HTML-Seite aus
6. Nachdem der Upload abgeschlossen ist, klicken Sie auf „Upload fortsetzen“ Klicken Sie auf die Schaltfläche, um das Dateiauswahlfeld zu öffnen und mit dem Hochladen fortzufahren.
HTML-Teil ist relativ einfach:
<p class="upload"> <p class="uploadBox"> <span class="inputCover">选择文件</span> <form enctype=""> <input type="file" name="file" id="file" /> <button type="button" class="submit">上传</button> </form> <button type="button" class="upagain">继续上传</button> <span class="processBar"></span> <span class="processNum">未选择文件</span> </p> </p>
CSS, der Stil kann frei nach persönlichen Vorlieben angepasst werden, hier dient nur als Referenz:
*{ font-family: 'microsoft yahei'; color: #4A4A4A; } .upload{ width: 700px; padding: 20px; border: 1px dashed #ccc; margin: 100px auto; border-radius: 5px; } .uploadBox{ width: 100%; height: 35px; position: relative; } .uploadBox input{ width: 200px; height: 30px; background: red; position: absolute; top: 2px; left: 0; z-index: 201; opacity: 0; cursor: pointer; } .uploadBox .inputCover{ width: 200px; height: 30px; position: absolute; top: 2px; left: 0; z-index: 200; text-align: center; line-height: 30px; font-size: 14px; border: 1px solid #009393; border-radius: 5px; cursor: pointer; } .uploadBox button.submit{ width: 100px; height: 30px; position: absolute; left: 230px; top: 2px; border-radius: 5px; border: 1px solid #ccc; background: #F0F0F0; outline: none; cursor: pointer; } .uploadBox button.submit:hover{ background: #E0E0E0; } .uploadBox button.upagain{ width: 100px; height: 30px; position: absolute; left: 340px; top: 2px; display: none; border-radius: 5px; border: 1px solid #ccc; background: #F0F0F0; outline: none; cursor: pointer; } .uploadBox button.upagain:hover{ background: #E0E0E0; } .processBar{ display: inline-block; width: 0; height: 7px; position: absolute; left: 500px; top: 14px; background: #009393; } .processNum{ position: absolute; left: 620px; color: #009393; font-size: 12px; line-height: 35px; }
JS-Teil, jq.ajax:
$(document).ready(function(){ var inputCover = $(".inputCover"); var processNum = $(".processNum"); var processBar = $(".processBar"); //上传准备信息 $("#file").change(function(){ var file = document.getElementById('file'); var fileName = file.files[0].name; var fileSize = file.files[0].size; processBar.css("width",0); //验证要上传的文件 if(fileSize > 1024*2*1024){ inputCover.html("<font>文件过大,请重新选择</font>"); processNum.html('未选择文件'); document.getElementById('file').value = ''; return false; }else{ inputCover.html(fileName+' / '+parseInt(fileSize/1024)+'K'); processNum.html('等待上传'); } }) //提交验证 $(".submit").click(function(){ if($("#file").val() == ''){ alert('请先选择文件!'); }else{ upload(); } }) //创建ajax对象,发送上传请求 function upload(){ var file = document.getElementById('file').files[0]; var form = new FormData(); form.append('myfile',file); $.ajax({ url: 'upload.php',//上传地址 async: true,//异步 type: 'post',//post方式 data: form,//FormData数据 processData: false,//不处理数据流 !important contentType: false,//不设置http头 !important xhr:function(){//获取上传进度 myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',function(e){//监听progress事件 var loaded = e.loaded;//已上传 var total = e.total;//总大小 var percent = Math.floor(100*loaded/total);//百分比 processNum.text(percent+"%");//数显进度 processBar.css("width",percent+"px");//图显进度}, false); } return myXhr; }, success: function(data){//上传成功回调 console.log("文档当前位置是:"+data);//获取文件链接 document.cookie = "url="+data;//此行可忽略 $(".submit").text('上传成功'); $(".upagain").css("display","block"); } }) } //继续上传 $(".upagain").click(function(){ $("#file").click(); processNum.html('未选择文件'); processBar.css("width",0); $(".submit").text('上传'); document.getElementById('file').value = ''; $(this).css("display","none"); }) })
Hochladen abgeschlossen, upload.php-Verarbeitungsdatei (zur Serversicherheit werden nur Codeausschnitte gepostet):
<?php if(isset($_FILES["myfile"])){ move_uploaded_file($_FILES["myfile"]["tmp_name"],"ajax/".$_FILES["myfile"]["name"]); echo "http://www.xuxiangbo.com/ajax/".$_FILES["myfile"]["name"]; }else{ echo 'no file'; } ?>
Nachdruck aus Blog
Autor: Imin
Link: http://blog.xuxiangbo.com/im-22.html
Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
PHP+sftp zum Implementieren des Datei-Uploads und -Downloads
Vier Arten So generieren Sie eine Zeichenfolge mit zufälligen Wörtern in PHP
Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax+php, um Dateien hochzuladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.

Das Arbeiten mit der Datenbank in CakePHP ist sehr einfach. In diesem Kapitel werden wir die CRUD-Operationen (Erstellen, Lesen, Aktualisieren, Löschen) verstehen.

Um in cakephp4 mit Datum und Uhrzeit zu arbeiten, verwenden wir die verfügbare FrozenTime-Klasse.

Um am Datei-Upload zu arbeiten, verwenden wir den Formular-Helfer. Hier ist ein Beispiel für den Datei-Upload.

CakePHP ist ein Open-Source-Framework für PHP. Es soll die Entwicklung, Bereitstellung und Wartung von Anwendungen erheblich vereinfachen. CakePHP basiert auf einer MVC-ähnlichen Architektur, die sowohl leistungsstark als auch leicht zu verstehen ist. Modelle, Ansichten und Controller gu

Der Validator kann durch Hinzufügen der folgenden zwei Zeilen im Controller erstellt werden.

Die Anmeldung bei CakePHP ist eine sehr einfache Aufgabe. Sie müssen nur eine Funktion verwenden. Sie können Fehler, Ausnahmen, Benutzeraktivitäten und von Benutzern durchgeführte Aktionen für jeden Hintergrundprozess wie Cronjob protokollieren. Das Protokollieren von Daten in CakePHP ist einfach. Die Funktion log() wird bereitgestellt

Visual Studio Code, auch bekannt als VS Code, ist ein kostenloser Quellcode-Editor – oder eine integrierte Entwicklungsumgebung (IDE) –, die für alle gängigen Betriebssysteme verfügbar ist. Mit einer großen Sammlung von Erweiterungen für viele Programmiersprachen kann VS Code c
