ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップに基づくアップロード プラグイン fileinput は、Ajax 非同期アップロード機能を実装します (複数のファイルのアップロード プレビューのドラッグ アンド ドロップをサポート)

ブートストラップに基づくアップロード プラグイン fileinput は、Ajax 非同期アップロード機能を実装します (複数のファイルのアップロード プレビューのドラッグ アンド ドロップをサポート)

韦小宝
韦小宝オリジナル
2018-01-01 18:35:284022ブラウズ

この記事は主にブートストラップアップロードプラグインfileinputに基づいたajaxの非同期アップロード機能を紹介します(複数のファイルアップロードプレビューのドラッグアンドドロップをサポート)。これは非常に優れており、ajaxアップロードに興味のある友人は参考にすることができます。ブートストラッププラグイン fileinput によるアップロードに基づく ajax 非同期アップロード機能 (複数ファイルのアップロード プレビュー ドラッグ アンド ドロップをサポート) の記事へ!

まず、いくつかの js と css ファイルをインポートする必要があります

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

php code

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

次に、を使用してアップロードしますajax エラーメッセージまたは成功メッセージを返します

echo を使用して直接返すこともできます。

スタイル:

上記は、エディターによって導入されたブートストラップベースのアップロードプラグインfileinputのajax非同期アップロード機能です(複数ファイルのアップロードプレビューのドラッグアンドドロップをサポートします)。みんなの役に立ちますように! !

関連する推奨事項:

Ajaxエラーに対処する方法

ajax ローカルjsonを読み取る方法

Ajaxボタンをリクエストするときに1回クリックして2回送信する解決策

以上がブートストラップに基づくアップロード プラグイン fileinput は、Ajax 非同期アップロード機能を実装します (複数のファイルのアップロード プレビューのドラッグ アンド ドロップをサポート)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。