web-dev-qa-db-ja.com

JQuery File Upload Demoでファイルタイプを制限する

Codeigniterでの次のプロジェクトに JQueryファイルアップロードデモ を使用しています。誰も私に以下を達成する方法を教えてもらえますか:

  • アップロードファイルの種類を.Zipと.rarに制限する
  • ファイルサイズを制限する
  • アップロードされたファイルのリストの消去(JQueryファイルアップロードプラグインは、既にアップロードされたファイルのリストを表示します)

感謝します!!

22
Faisal Memon

あなたはおそらく多すぎる解決策を持っているでしょうが、jqueryアップローダーにBASICプラグインを使用したい、つまり他のスクリプトなしで..何らかの理由でmaxFileSize/fileTypesオプションが機能していませんでしたドキュメントを読むの!

とにかく、次のことをするのと同じくらい迅速でした:

    add: function (e, data) {
        var goUpload = true;
        var uploadFile = data.files[0];
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
            common.notifyError('You must select an image file only');
            goUpload = false;
        }
        if (uploadFile.size > 2000000) { // 2mb
            common.notifyError('Please upload a smaller image, max size is 2 MB');
            goUpload = false;
        }
        if (goUpload == true) {
            data.submit();
        }
    },

したがって、ADDオプションを使用して正規表現の画像タイプのみを許可し、(私の場合)ファイルサイズのチェックは最大2MBです。

むしろ基本的であり、maxFileSizeオプションが機能すると確信していますが、基本的なプラグインスクリプトjquery.fileupload.jsのみを含めています

[〜#〜] edit [〜#〜]私の場合、1つのファイル(プロファイル画像)のみをアップロードする必要があるため、data.files [0] ..を繰り返すことができます。もちろん、ファイルのコレクションを介して。

67
Dav.id

Jquery.fileupload-ui.jsでこの部分を編集します。

   $.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        // The maximum allowed file size:
        maxFileSize: 100000000,
        // The minimum allowed file size:
        minFileSize: undefined,
        // The regular expression for allowed file types, matches
        // against either file type or file name:
        acceptFileTypes:  /(Zip)|(rar)$/i,
        ----------------------------------------------------------------

アップロードされたファイルのリストをクリアするには-その機能が必要ない場合、main.jsから$ .getJSON呼び出しを削除します。

7
Potheek

公式文書によると;

$('#file_upload').fileUploadUIX({
    maxFileSize: 5000000, // Maximum File Size in Bytes - 5 MB
    minFileSize: 100000, // Minimum File Size in Bytes - 100 KB
    acceptFileTypes: /(Zip)|(rar)$/i  // Allowed File Types
});
3

もう1つの方法は次のとおりです。

 $('#upload').fileupload({ 
       change: function (e, data) { 
                if (!(/\.(jpg|jpeg|png|pdf)$/i).test(data.files[0].name)) {
                    alert('Not Allowed');
                    return false;
                }
        } 
 });
1
shana