Javascript 根据文件选择器选择更改div背景
我正在寻找一种方法,当用户从表单输入中选择图像时,可以更改div背景图像。正如你在下面看到的,我有一个输入类型的文件。一旦用户选择了他们想要的文件,我希望div#imgHolder根据选择的文件更改背景。有什么想法吗Javascript 根据文件选择器选择更改div背景,javascript,html,css,html5,Javascript,Html,Css,Html5,我正在寻找一种方法,当用户从表单输入中选择图像时,可以更改div背景图像。正如你在下面看到的,我有一个输入类型的文件。一旦用户选择了他们想要的文件,我希望div#imgHolder根据选择的文件更改背景。有什么想法吗 <div id="simpleDialog" style="width: 350px; height: 350px; display:none;" scrolltop="0"> <br> <div id="imgHolder" style=
<div id="simpleDialog" style="width: 350px; height: 350px; display:none;" scrolltop="0">
<br>
<div id="imgHolder" style="width:200px;height:200px;background-image: url(images/gray.png)"></div>
<br>
<form id="userForm" align="center">
<fieldset>
<legend>Artist Info</legend>
<input type="file" name="artistImage" id="artistImage" style="border: none;float:left"><br><br>
<label for="text" style="float:left">Enter URL:</label>
<input type="text" name="website" id="website" value="" required="required">
</fieldset>
</form>
<input type="button" id="submit" value="Submit" />
<input type="button" id="cancel" value="Cancel" />
</div>
艺术家信息
输入URL:
您可以编写jQuery,单击表单输入的图像以更改#imgHolder
的css属性背景图像
如果要访问本地计算机上的图片,可以使用
功能手柄文件选择(evt){
var files=evt.target.files;//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for(var i=0,f;f=files[i];i++){
//仅处理图像文件。
如果(!f.type.match('image.*')){
继续;
}
var reader=new FileReader();
//闭包以捕获文件信息。
reader.onload=(函数(文件){
返回函数(e){
//渲染缩略图。
var span=document.createElement('span');
span.innerHTML=['').join('');
document.getElementById('list').insertBefore(span,null);
};
})(f) );
//作为数据URL读入图像文件。
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change',handleFileSelect,false);
由于浏览器的安全模式,它将不允许您从本地计算机访问文件并在浏览器中显示它,除非您使用HTML5 FileReader()功能(不幸的是,到目前为止,所有浏览器都不支持该功能)。由于您标记了此功能,您知道这是一种高级浏览器功能
你所要求的将需要文件阅读器,在(甚至IE)中提供
我刚刚在InternetExplorer10、Chrome19/21、Firefox12/13和Opera11.64中测试了上述代码,发现它工作正常
不支持FileReader的旧浏览器将保持沉默。未显示图像,未引发异常
Fiddle:我不确定onClick是否可以工作,因为在onClick上不会正确选择图像。是的,您是正确的,您可以做的是,当您执行onClick时,只需读取img的src属性并将其用作背景url,确保在执行操作后返回false。是用户将从其PC中选择文件的输入。输入文本类型是,用户可以将艺术家网页与他们希望使用的图形一起保存。@Derek:Enter url是另一个输入框的标签,用于输入网站。同时阅读问题描述。在这里,用户将选择一个文件。type=“file”用于文件上载。我不希望在图像更改时提交。当用户从文件选择器中选择图像时,我希望div背景发生变化。通过这种方式,他们可以确保自己对所选的图像满意,并希望在其中表示所选的URL。此代码将不起作用,因为用户正在使用“输入文件”字段从本地计算机选择文件。上面的代码是从另一个字段中的文本设置bg图像。(为了证明我的否决票是正确的)这条代码会起作用的。它访问本地计算机,并以DataURL的形式读取图像文件。这在所有浏览器中都不起作用。这只适用于支持最新HTML5功能的broswers。我们不能要求用户升级软件以使用此功能。@kiranvj-我想您应该先看看有哪些标签。你错过了什么。有一个HTML5标记。@JohnathanSampson如果我从jQuery弹出窗口运行它,这会导致问题吗?在fiddle中它可以工作,但在我的页面上它不能。@MatthewLancaster我需要查看您的代码,但原则上不行-这里的任何内容都不应该被模态元素阻止。你有什么问题?@JohnathanSampson这里有把小提琴:当然在这里有用:)。我试过Firefox13.0和Chrome19。x@MatthewLancaster当它不起作用时,你在控制台中看到任何输出吗?@Derek我不太喜欢投反对票,所以我不能证明任何人对你的答案投反对票是正确的。尽管如此,它还是有点混乱,尽管从技术上讲它采取了正确的方法。
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
// Bind to the change event of our file input
$("input[name='myFileSelect']").on("change", function(){
// Get a reference to the fileList
var files = !!this.files ? this.files : [];
// If no files were selected, or no FileReader support, return
if ( !files.length || !window.FileReader ) return;
// Only proceed if the selected file is an image
if ( /^image/.test( files[0].type ) ) {
// Create a new instance of the FileReader
var reader = new FileReader();
// Read the local file as a DataURL
reader.readAsDataURL( files[0] );
// When loaded, set image data as background of page
reader.onloadend = function(){
$("html").css("background-image", "url(" + this.result + ")");
}
}
});