-1 
<div id="back" style=" background-repeat:no-repeat;  border:thin solid black;     width:200px; height:230px;" >
<input type="file" id="image_file" name="image_file[]" multiple     onchange="fileSelected();" />
<output id="list"></output>

function fileSelected() {
    // get selected file element
    var oFile = document.getElementById('image_file').files[0];

    // filter for image files
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
    if (! rFilter.test(oFile.type)) {
        document.getElementById('list').style.display = 'block';
        return;
    }


    // get preview element
    var oImage = document.getElementById('back');

    // prepare HTML5 FileReader
    var oReader = new FileReader();

    oReader.onload = function(e){

        // e.target.result contains the DataURL which we will use as a source of the image
        oImage.style.backgroundImage = e.target.result;

        oImage.onload = function () { // binding onload event

            // we are going to display some custom image information here
            sResultFileSize = bytesToSize(oFile.size);
            document.getElementById('list').style.display = 'block';
            document.getElementById('list').innerHTML = 'Name: ' + oFile.name;
        };
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

ファイルの選択に従ってdivの背景を設定したいのですが、それを達成できません。

img 要素を使用してこれを行うことはできますが、それは私の要件ではありません。

ファイル入力でimgを選択するたびにdivの背景を変えたい。

事前に感謝します...助けてください

4

1 に答える 1

0

行を変更してみてください：

 oImage.style.backgroundImage = e.target.result;

に：

 oImage.style.backgroundImage = "url(" + e.target.result + ")";
于 2013-09-16T21:44:40.083 に答える