2

まっすぐに。ユーザーがpluploadを使用して画像をアップロードするときに、画像の幅と高さの制限を設定したい。

Letsay: if width: 1000px height: 1000px それ以外の場合は、少なくとも width:1000px と height:1000px の画像をアップロードする必要があります

// $(".form").validator();
$(function() {
    if($("#uploader").length > 0) {
        var uploader = new plupload.Uploader({
            runtimes : 'html5,flash,silverlight',
            browse_button : 'pickfile',
            container : 'uploader',
            max_file_size : '10mb',
            url : 'design.php?do=upload&ajax=1',
            multiple_queues: false,
            file_data_name: 'design',
            flash_swf_url : www + '/js/plupload.flash.swf',
            silverlight_xap_url : www + '/js/plupload.silverlight.xap',
            filters : [
                {title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"}
            ]

        });

        $('#uploadfiles').click(function(e) {
            if($("#uploader select[name=category]").val() == "") {
                $("#uploader select[name=category]").next('.error-required').show();
                return false;
            }

            uploader.start();
            e.preventDefault();
        });

        uploader.init();

それで、これは可能ですか？

4

4 に答える 4

3

plupload のフィルターは簡単に作成できます。

これは、必要な最小幅のフィルターです。以下のコードをスクリプトに追加します。(コピペするだけ)

plupload.addFileFilter('min_width', function(maxwidth, file, cb) {
    var self = this, img = new o.Image();

    function finalize(result) {
        // cleanup
        img.destroy();
        img = null;

       // if rule has been violated in one way or another, trigger an error
        if (!result) {
            self.trigger('Error', {
                code : plupload.IMAGE_DIMENSIONS_ERROR,
                message : "Image width should be more than " + maxwidth  + " pixels.",
                file : file
            });
     }
        cb(result);
    }
    img.onload = function() {
        // check if resolution cap is not exceeded
        finalize(img.width >= maxwidth);
    };
    img.onerror = function() {
        finalize(false);
    };
    img.load(file.getSource());
});

そして、このフィルターをアップロード スクリプトに追加します。

filters : {
            min_width: 700,
        },
于 2015-09-23T08:22:11.800 に答える
1

Pluploadは、これ自体をサポートしていません（要求されていますが）。これにはおそらくいくつかの理由があります。1つはIEにアップロードする前に画像のサイズを取得できないため（他の一部のブラウザでは可能）、2つ目はHTML4/5を使用する一部のブラウザで機能するためです。メソッド、フラッシュ/シルバーライトなどのメソッドも確実に寸法を決定できるかどうかはわかりません。

限られたブラウザ、HTML4 / 5メソッドに満足している場合は、「FilesAdded」イベントにフックする必要があります。

uploader.bind('FilesAdded', function(up, files) {
  //Get src of each file, create image, remove from file list if too big
});
于 2012-12-30T15:43:59.090 に答える
0

私は最近、同じことをしたいと思っていました.Thomが提案していた方法でそれを達成することができました. ただし、その制限については彼は正しかった。これを追加したい場合は、最新のブラウザーでのみ機能し、flash または Silverlight ランタイムでは機能しません。HTML5 以外のユーザーは、アップロード前ではなくアップロード後にエラーが発生するため、これは大きな問題ではありません。

ページに配置された画像を追跡するために、合計画像カウント変数を初期化しました。また、すべて読んだ後に削除したい写真を保存するための変数もあります。

var total_image_count = 0;
var files_to_remove = [];

次に、保留中のファイルを FileReader() で読み取り、ページに配置して幅を取得します。

init:{
        FilesAdded: function(up, files) {
           if (uploader.runtime == "html5"){
              files = jQuery("#"+uploader.id+"_html5")[0].files
              console.log(files);
              for (i in files){

                 //create image tag for the file we are uploading
                 jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container");

                 reader_arr[total_image_count] = new FileReader();

                 //create listener to place the data in the newly created 
                 //image tag when FileReader fully loads image.
                 reader_arr[total_image_count].onload = function(total_image_count) {
                    return function(e){
                       var img = $("#image-"+total_image_count);
                       img.attr('src', e.target.result);
                       if ($(img)[0].naturalWidth < 1000){

                          files_to_remove.push(files[i]); //remove them after we finish reading in all the files
                          //This is where you would append an error to the DOM if you wanted.
                          console.log("Error. File must be at least 1000px");
                       }
                    }
                 }(total_image_count);

                 reader_arr[total_image_count].readAsDataURL(files[i]);

                 total_image_count++;
              }
              for (i in files_to_remove){
                 uploader.removeFile(files_to_remove[i]);
              }
           }
        }
     }

ちなみに、とにかく画像のサムネイルを表示したかったので、この方法はうまく機能します。最初にDOMに追加せずに画像の幅を取得する方法がわかりません。

ソース:

アップロード前の画像のサムネイル: https://stackoverflow.com/a/4459419/686440

画像の自然な幅へのアクセス: https://stackoverflow.com/a/1093414/686440

于 2013-02-28T20:45:50.817 に答える