使用文件输入选择在php中上传和查看没有表单帖子的图片
问题描述:
<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);
}
I want to set the background of the div according to file select, but I am unable to achieve that.
I'm able to do this with an img element but that's not my requirement.
I want to change the div background every time I select a img using file input.
thanx in advance...plz help
答
Try changing the line:
oImage.style.backgroundImage = e.target.result;
to:
oImage.style.backgroundImage = "url(" + e.target.result + ")";