So verwenden Sie FileInput, um den asynchronen Ajax-Upload zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie Fileinput zum Implementieren des asynchronen Ajax-Uploads verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Fileinput zum Implementieren des asynchronen Ajax-Uploads?

Zuerst müssen Sie einige JS- und CSS-Dateien importieren

<link href="PUBLIC/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="PUBLIC/CSS/fileinput.css" rel="external nofollow" />
 <script type="text/javascript" src="PUBLIC/JS/bootstrap.min.js"></script>
<script type="text/javascript" src="PUBLIC/JS/jquery.min.js"></script>
<script type="text/javascript" src="PUBLIC/JS/fileinput.js"></script>
<script type="text/javascript" src="PUBLIC/JS/fileinput_locale_zh.js"></script>//中文包，不需要可以不用导入

HTML-Code

<form enctype="multipart/form-data">
　　<input id="file-1" name="file" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"/>
</form>

JS-Code

$("#file-1").fileinput({
　　uploadUrl: '', // 必须设置个路径进入php代码部分
　　allowedFileExtensions : ['jpg', 'png','gif','txt','zip','ico','jpeg','js','css','java','mp3','mp4','doc','docx'],//允许的文件类型
　　overwriteInitial: false,
　　maxFileSize: 1500,//文件的最大大小 单位是k
　　maxFilesNum: 10,//最多文件数量 
　　// allowedFileTypes: ['image', 'video', 'flash'],
　　slugCallback: function(filename) {
　　　　return filename;
　　}
});

PHP-Code

$file=$_FILES['file'];//获取上称文件的信息，数组形式
$date['file_name'] = $file['name'];//文件的名称
$date['file_size'] = $file['size'];//文件的大小
$date['file_type'] = $file['type'];//文件的类型

Anschließend hochladen, Ajax verwenden, um eine Fehlermeldung oder Erfolgsmeldung

zurückzugeben, oder einfach Echo verwenden, um sie direkt zurückzugeben.

Stil:

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Dinge, bitte achten Sie auf PHP-Chinesisch. Andere verwandte Artikel online!

Empfohlene Lektüre:

jQuery+Ajax ermittelt, ob der eingegebene Bestätigungscode erfolgreich ist

So geben Sie von Ajax zurückgegebene Tags an Stile dynamisch hinzufügen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie FileInput, um den asynchronen Ajax-Upload zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!