Dieses Mal bringe ich Ihnen die Funktion von Ajax+node js multer zum Datei-Upload. Was sind die Vorsichtsmaßnahmen für Ajax+node js multer zum Hochladen von Dateien? Werfen wir einen Blick auf praktische Fälle.
Anleitung
Als Node-Anfänger arbeite ich derzeit an einer Chat-Software, die Registrierung, Login, Online-Einzel- und Mehrpersonen-Chat unterstützt Chat, Senden von Emoticons, Hoch- und Herunterladen verschiedener Dateien, Hinzufügen und Löschen von Freunden, Speichern von Chat-Datensätzen, Wechseln von Benachrichtigungstönen, Wechseln von Hintergrundbildern, Spielen und anderen Funktionen, also wurde das Multer-Modul nach verschiedenen Dokumentensuchen und Demo-Beispielen verwendet Die Upload-Funktion unterstützt das Hochladen der meisten Dateiformate und zeigt diese gleichzeitig auf der Webseite an
Fühlt es sich nicht so an, als wäre WeChat sofort sichtbar? Falsch, es basiert auf der Webversion von WeChat
Um den Gesamteffekt zu erzielen, muss es getan werden Ich bin ein Front-End-Anfänger und habe es wirklich eilig. Interessierte Freunde können einen Blick darauf werfen 🎜>
und laden Sie den Code direkt unten hoch 🎜>
Multer direkt über das cmd-Befehlsfenster installieren
Servercode
Clientcode
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Andere verwandte Artikel! Empfohlene Lektüre:
So implementieren Sie eine domänenübergreifende WebApi-Ajax-Anfrage mit CORS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | const http= require ( "http" );
const express= require ( "express" );
const multer= require ( "multer" );
var app=express();
var server=http.createServer(app);
server.listen(8081);
app. use (express. static ( "public" ));
var storage = multer.diskStorage({
destination: function (req, file, cb){
cb(null, './public/upload' )
},
filename: function (req, file, cb){
cb(null, file.originalname)
}
});
var upload = multer({
storage: storage
});
app.post( '/upload' , upload.single( 'file' ), function (req, res, next) {
var url = 'http://' + req.headers.host + '/upload/' + req.file.originalname;
res.json({
code : 1,
data : url
});
res. end ();
});
|
Nach dem Login kopieren
So implementieren Sie das dynamische Laden von Kombinationsfelder mit Ajax (mit Code)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html>
<html>
<head lang= "en" >
<meta charset= "UTF-8" >
<title></title>
<!--依托于jquery-->
<script src= "js/jquery-1.11.3.js" ></script>
</head>
<body>
<p class = "container" >
<label>file</label>
<input type= "file" name= "file" id= "file" >
</p>
<script>
var file=$( "#file" )[0];
file.onchange= function (){
var formData= new FormData();
formData.append( 'file' ,file.files[0]);
var src=file.files[0].name,
formart=src.split( "." )[1];
if (formart== "jpg" ||formart== "png" ||
formart== "docx" ||formart== "txt" ||
formart== "ppt" ||formart== "xlsx" ||
formart== "zip" ||formart== "rar" ||
formart== "doc" ){
$.ajax({
url: '/upload' ,
type: 'POST' ,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data){
if (data.code>0){
var src=data.data;
if (formart== "docx" ||formart== "txt" ||formart== "doc" ){
var className= "docx" ;
var msg=`<a href= "${src}" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ><i class = "${className}" ></i></a>`;
} else if (formart== "ppt" ){
className= "ppt" ;
msg=`<a href= "${src}" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ><i class = "${className}" ></i></a>`;
} else if (formart== "xlsx" ){
className= "xlsx" ;
msg=`<a href= "${src}" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ><i class = "${className}" ></i></a>`;
} else if (formart== "zip" ||formart== "rar" ){
className= "zip" ;
msg=`<a href= "${src}" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" ><i class = "${className}" ></i></a>`;
} else {
msg=`<a href= "javascript:;" rel= "external nofollow" class = "picCheck" ><img src= "${src}" ></a>`;
}
}
}
} else {
alert( "文件格式不支持上传" )
}
}
</script>
</body>
</html>
|
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonAjax+node js multer ermöglicht die Datei-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!