2

複数の画像（最大6つまで）をアップロードするオプションを備えたさまざまなフォーム要素を含むフォームを扱っています。今、私はpreviewそのdivをクリックしてdivを持っています。jqueryを使用してすべてのフォームフィールドをフェッチします（フォームはマルチフォームステップ1、2、3として現時点ではまだ送信されていません）。問題は、このコードですべてのフォームデータをフェッチしていることです-

var allFormData = $("#myform").serializeArray();

この別のコードを使用して、残りのデータをdivで表示できますが、画像が表示されません。

$.each(adtitletoshow, function(i, field){
    if( field.name == 'desc'){ 
        $(".add_desc").text(field.value);
    }
});

これは、画像をアップロードするためにJSによって作成されたファイルです。

<script type="text/javascript">
    var total_images = 1 ;
    function add_file_field () {
        total_images++ ;
        if ( total_images > 6 ) return ;
        var str_to_embed = '<input name="fileImage[]" size="40" style="width: 500px;" type="file" onChange="add_file_field()"><br>' ;
        $("#image_stack").append ( str_to_embed ) ;
    }
</script>

すべてが1ページで行われるため、プレビューdivで画像を読み込む方法を教えてください。thrがあいまいな点がまだ残っているかどうかを教えてください。

4

2 に答える 2

7

複数の入力から files 配列をループし、それぞれで FileReader API を使用する必要があります。

HTML を次のように設定しました。

​&lt;input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>​​​​​​​​​​​​​​​​​​​​​​

次に、JavaScript を次のようにします。

// set up variables
var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;

// use the FileReader to read image i
function readFile() {
    reader.readAsDataURL(imageFiles[i])
}

// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {

    // make an image and append it to the div
    var image = $('<img>').attr('src', e.target.result);
    $(image).appendTo('#images');

    // if there are more files run the file reader again
    if (i < numFiles) {
        i++;
        readFile();
    }
};

$('#go').click(function() {

    imageFiles = document.getElementById('files').files
    // get the number of files
    numFiles = imageFiles.length;
    readFile();           

});

http://jsfiddle.net/3LB72/のデモを行うために JSFiddle をセットアップしました

ユーザーが使用しているブラウザーに FileReader があるかどうか、およびユーザーが選択したファイルが画像ファイルであるかどうかをさらに確認する必要があるでしょう。

于 2012-05-30T16:18:16.057 に答える
1

JSFiddle デモ

ボタンをクリックしなくても、これははるかに優れています:D

HTML:

<input type="file" multiple="true" id="files" />
<input type="submit" id="go"/>
<div id="images"></div>

JavaScript:

// set up variables
var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;

// use the FileReader to read image i
function readFile() {
    reader.readAsDataURL(imageFiles[i])
}

// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {

// make an image and append it to the div
$("#images").css({'background-image':'url('+e.target.result+')'});    
    // if there are more files run the file reader again
    if (i < numFiles) {
        i++;
        readFile();
    }
};

$('#files').live('change', function(){
    imageFiles = document.getElementById('files').files
    // get the number of files
    numFiles = imageFiles.length;
    readFile();           
});
于 2013-06-17T16:49:31.127 に答える