如何使用 Javascript/HTML 制作一个简单的图像上传

是否有人知道如何做一个简单的图像上传和显示在页面上。

这就是我要找的。

  • 用户(我)将选择一个图像
  • 页面将显示图像，而不刷新页面或转到其他文件。
  • 多个 <img src>就可以了，因为我需要显示不同的图像大小。

这是我的代码。(其中一些是编辑，我从 给你得到它)

<style>
/* Image Designing Propoerties */
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>


<script type="text/javascript">
/* The uploader form */
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();


reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});


function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
$('#yourImage').attr('src', e.target.result);
};


</script>




<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=200 width=100>
380363 次浏览
小开

Try this, It supports multi file uploading,

$('#multi_file_upload').change(function(e) {
var file_id = e.target.id;


var file_name_arr = new Array();
var process_path = site_url + 'public/uploads/';


for (i = 0; i < $("#" + file_id).prop("files").length; i++) {


var form_data = new FormData();
var file_data = $("#" + file_id).prop("files")[i];
form_data.append("file_name", file_data);


if (check_multifile_logo($("#" + file_id).prop("files")[i]['name'])) {
$.ajax({
//url         :   site_url + "inc/upload_image.php?width=96&height=60&show_small=1",
url: site_url + "inc/upload_contact_info.php",
cache: false,
contentType: false,
processData: false,
async: false,
data: form_data,
type: 'post',
success: function(data) {
// display image
}
});
} else {
$("#" + html_div).html('');
alert('We only accept JPG, JPEG, PNG, GIF and BMP files');
}


}
});


function check_multifile_logo(file) {
var extension = file.substr((file.lastIndexOf('.') + 1))
if (extension === 'jpg' || extension === 'jpeg' || extension === 'gif' || extension === 'png' || extension === 'bmp') {
return true;
} else {
return false;
}
}

Here #multi_file_upload is the ID of image upload field.

小开

Here's a simple example with no jQuery. Use URL.createObjectURL, which

creates a DOMString containing a URL representing the object given in the parameter

Then, you can simply set the src of the image to that url:

window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.querySelector('img');
img.onload = () => {
URL.revokeObjectURL(img.src);  // no longer needed, free memory
}


img.src = URL.createObjectURL(this.files[0]); // set src to blob url
}
});
});
<input type='file' />
<br><img id="myImg" src="#">

小开 
<img id="output_image" height=50px width=50px\
<input type="file" accept="image/*" onchange="preview_image(event)">


<script type"text/javascript">
function preview_image(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output_image');
output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
</script>
小开 
<li class="list-group-item active"><h5>Feaured Image</h5></li>
<li class="list-group-item">
<div class="input-group mb-3">
<div class="custom-file ">
<input type="file"  class="custom-file-input" name="thumbnail" id="thumbnail">
<label class="custom-file-label" for="thumbnail">Choose file</label>
</div>
</div>
<div class="img-thumbnail  text-center">
<img src="@if(isset($product)) \{\{asset('storage/'.$product->thumbnail)}} @else \{\{asset('images/no-thumbnail.jpeg')}} @endif" id="imgthumbnail" class="img-fluid" alt="">
</div>
</li>
<script>
$(function(){
$('#thumbnail').on('change', function() {
var file = $(this).get(0).files;
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.addEventListener("load", function(e) {
var image = e.target.result;
$("#imgthumbnail").attr('src', image);
});
});
}
</script>

提交答案