Bootstrap-based upload plugin fileinput implement Ajax asynchronous upload function (support multi-file upload preview drag and drop)

First you need to import some JS and CSS files

?

123456

<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

?

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

?

1234567891011

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

?

1234	$file =$_files[ ' file ' ]; //get information on the file, array form $date [ ' file_name ' ] = $file [ ' name ' ]; //file name $date [ ' file_size ' ] = $file [ ' size ' ]; //File size $date [ ' File_type ' ] = $file [ ' type ' ]; //file type

Then upload and return an error message or success message with Ajax

Returning directly with Echo is also OK.

Style:

The above is a small part of the introduction of the bootstrap-based upload plugin fileinput ajax asynchronous upload function (support multi-file upload preview drag and drop), I hope to help you, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for the support of the Scripting House website!

Original link: http://www.cnblogs.com/zhuchenglin/articles/6554738.html

Bootstrap-based upload plugin fileinput implement Ajax asynchronous upload function (support multi-file upload preview drag and drop)