jQuery中的文件上传问题答案

【问题标题】：File upload problems in jQueryjQuery中的文件上传问题
【发布时间】：2015-10-24 01:46:39
【问题描述】：

here is an upload button, from which user can choose the file

基本上我想做的是每当用户从中选择图像时，它应该显示在“树”图像所在的位置。

我被困住了，真的需要一些帮助。

这里是代码

<div class="user-editable-div">	
		<div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
		<span class="upload-btn">UPLOAD IMAGE</span>
		<input type="file" id="uploader" />
		<div class="content-div">
			<h1 contenteditable="true">USER EDITABLE</h1>
			<p contenteditable="true">All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.</p>
	</div>
</div>

当用户从“#uploader”中选择一个文件时，它应该在“#bg_image”中显示图像

【问题讨论】：

你使用 ajax() 或 post() 或 get() 或者你只是用 php 来做？？
我是初学者，所以不太了解，使用 jquery，我不希望页面重新加载，我只希望用户选择应该在页面上显示的文件。跨度>
stackoverflow.com/questions/166221/…

标签： php jquery html css upload

【解决方案1】：

使用此代码，当您尝试使用文件控制器上传图像时，当时 bg_image 元素中的图像预览

   <div class="user-editable-div">  
        <div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
        <span class="upload-btn">UPLOAD IMAGE</span>
        <input type="file" id="uploader" onchange="readURL(this,this.id);"/>
        <div class="content-div">
            <h1 contenteditable="true">USER EDITABLE</h1>
            <p contenteditable="true">
              All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.
            </p>
        </div>
    </div>

   <script>
function readURL(input,ids)
{
    if (input.files && input.files[0])
        {
            var reader = new FileReader();
            reader.onload = function (e)
            {
                $('#bg_image').attr('src', e.target.result).width(650).height(375);
            };
            reader.readAsDataURL(input.files[0]);
        }
}       
</script>

【讨论】：

【解决方案2】：

尝试将change 事件附加到input type="file" 元素，在change 处理程序中使用URL.createObjectURL() 和this.files[0] 参数来设置img 的src 和.attr(attribute, value)

$(":file").change(function(e) {
  $("#bg_image").attr("src", URL.createObjectURL(this.files[0]))
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-editable-div">	
		<div class="image-div" id="image_div"><img id="bg_image"src="" /></div>
		<span class="upload-btn">UPLOAD IMAGE</span>
		<input type="file" id="uploader" accept="image/*" />
		<div class="content-div">
			<h1 contenteditable="true">USER EDITABLE</h1>
			<p contenteditable="true">All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.</p>
	</div>
</div>

【讨论】：