How to use fileinput to implement ajax asynchronous upload

This time I will show you how to use fileinput to implement asynchronous ajax upload. What are the precautions for using fileinput to implement asynchronous ajax upload? The following is a practical case, let's take a look.

First you need to import some js and css files

<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'];//文件的类型

Then proceed Upload, use ajax to return an

error message or success message

or just use echo to return it directly.

Style:

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to php Chinese Other related articles online!

Recommended reading:

jQuery+Ajax determines whether the entered verification code passes

How to give the label returned by Ajax Dynamically add styles

The above is the detailed content of How to use fileinput to implement ajax asynchronous upload. For more information, please follow other related articles on the PHP Chinese website!