4

画像アップロード機能を実装したい。

アップロード後、サムネイルを作成できるようにファイルのローカル パスを取得します。しかし、どうすればファイルパスを取得できますか? サムネイルを作成する別の方法はありますか?

jQuery-File-Upload プラグインを試しました。

4

3 に答える 3

1

セキュリティ上の理由から、ファイルパスを取得する方法はありません。値から削除することによってのみファイル名を取得できfakepathます: input.value.split("/")[1].

サムネイルを作成するには、ローカルのファイルではなく、既にアップロードされているファイルを使用します。

于 2012-04-10T06:40:12.470 に答える
1

jQuery File Upload Demo Pageは、アップロードするファイル名を取得する概念を示しています。ファイルが追加されると、ファイル名がコントロールの下のテーブル ビューに表示されます。

プラグインには、特定のイベントが発生した後に発生するコールバックを含むいくつかのオプションがあります。

ファイル名を取得する方法を示す例を次に示します。

function (e, data) {
    $.each(data.files, function (index, file) {
        alert('Added file: ' + file.name);   // filename alerted
    });
    data.url = '/path/to/upload/handler.json';
    var jqXHR = data.submit()
        .success(function (result, textStatus, jqXHR) {/* ... */})
        .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
        .complete(function (result, textStatus, jqXHR) {/* ... */});
}

.bindドキュメントによると、 jQuery のキーワードを使用してコールバック関数をバインドすると、成功する可能性が最も高くなります。

$('#fileupload')
   .bind('fileuploadadd', function(e, data) { ... } );

「追加」に関するドキュメントから：

data パラメーターを使用すると、プラグイン オプションをオーバーライドしたり、ajax 設定を定義したりできます。data.files は、アップロード リクエストのファイルのリストを保持します。singleFileUploads オプションが有効になっている場合 (これがデフォルトです)、add コールバックは、data.files 配列を使用して、XHR ファイル アップロードの選択でファイルごとに 1 回呼び出されます。各ファイルは個別にアップロードされるため、長さは 1 です。それ以外の場合、追加コールバックは、ファイル選択ごとに 1 回呼び出されます。

jQuery File Upload Optionsの完全なリストは次のとおりです。

さらに、ファイル名にアクセスする目的である画像プレビューをサポートしているのは、一部のブラウザーのみです。

画像プレビュー

次のブラウザーは、ファイルをアップロードする前に画像のプレビューをサポートしています。

  • Firefox 3.6+
  • グーグルクローム
  • オペラ 11+

ブラウザー サポートページには、プラグインの正確な機能がさまざまなブラウザーでサポートされているか、サポートされていないかについての詳細が記載されています。

于 2012-04-10T06:52:35.990 に答える
0

クロムはこれをサポートしていると思いますが、セキュリティ上の理由で削除されたかどうかはわかりません。

 <script type="text/javascript">     

function uploadFile(input) {         

if (input.files && input.files[0]) {            

 var reader = new FileReader();              
 reader.onload = function (e) {                 
 $('#test').attr('src', e.target.result).width(100).height(100);             
 };               
 reader.readAsDataURL(input.files[0]);        
 }     
} 

</script> 

<input type='file' onchange="uploadFile(this);" />     <img id="test" src="#" alt="my image" />
于 2012-04-10T06:40:14.860 に答える