1

いくつかの素晴らしいチュートリアルから始めて、次のことを試みました。1）jQuery（特にAjaxUploadライブラリ）を使用して、入力ファイルボタンから画像ファイルをアップロードします。2）CSSトリックを使用して、デフォルトのHTML5入力ファイルボタンをより優れたカスタムボタンに置​​き換えます。3）HTML5フィルターを使用して、「特定の画像のみ」のファイルのアップロードを許可します。

重要なのは、変更した入力ファイルボタンを使用すると、AjaxUploadライブラリが壊れているように見えることです（つまり、何も起こりません）。

たとえば、このJSFiddleは、デフォルトの入力ファイルを使用したテストです。ファイルをアップロードしようとすると、読み込み中のgifに、ファイルが現在アップロード中であることが示されます。 これは、変更された入力ファイルと同じです。gifの読み込みは開始されません。

また、私のChromeブラウザではHTML5ファイルのフィルタリングが壊れているようですが、これは小さな問題です。

何か案が？

4

1 に答える 1

1

これは、AjaxUploadの内部ロジックまたはブラウザのセキュリティ制限が原因である可能性があります。このCSSで試してみてください（高さは0％ではなく30pxです）：

    .file-wrapper input {
         cursor: pointer;
         font-size: 100px;
         width:100%; height:30px;
         filter: alpha(opacity=1);
         -moz-opacity: 0.01;
         opacity: 0.01;
         position: absolute;
         right: 0;
         top: 0;
     }

また、受け入れることについて。これは次のようになっている必要があります（Chromeでは確実に機能します）：

accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/tiff"

また、AjaxUploadでは機能しないようです。JSFiddleで試しましたが、結果としてaccept属性が表示されません。おそらくそれは何らかの理由でプラグインによって削除されます

于 2012-08-22T15:56:56.570 に答える