Ajax asynchronous Upload Based on the bootstrap upload plug-in fileinput (supports multi-File Upload preview and drag/drop), fileinputajax

Ajax asynchronous Upload Based on the bootstrap upload plug-in fileinput (supports multi-File Upload preview and drag/drop), fileinputajax

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>/Chinese package, no need to import

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: '', // you must set a path to enter the php code section allowedFileExtensions: ['jpg ', 'png', 'gif', 'txt ', 'zip', 'ico ', 'jpeg', 'js', 'css ', 'java', 'mp3', 'mp4', 'Doc ', 'docx'], // allowed file types overwriteInitial: false, maxFileSize: 1500, // The maximum file size unit is k maxFilesNum: 10, // maximum number of files // allowedFileTypes: ['image', 'video', 'flash'], slugCallback: function (filename) {return filename ;}});

Php code

$ File = $ _ FILES ['file']; // obtain the information of the object named above, array format $ date ['file _ name'] = $ file ['name']; // file name $ date ['file _ size'] = $ file ['SIZE']; // file size $ date ['file _ type'] = $ file ['type']; // file type

Then upload and use ajax to return an error message or success message.

It can also be returned directly using echo.

Style:

The above section describes the ajax asynchronous upload function of the bootstrap-based upload plug-in fileinput (supporting multi-File Upload preview and drag-and-drop), which is helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!