淘先锋技术网

首页 1 2 3 4 5 6 7

现在的社交网络越来越发达,大家也都喜欢上传自己的照片与朋友分享。在网页上,我们也需要实现上传照片的功能。而javascript就是其中一种实现上传功能的方式。下面我将来讲述一下如何使用javascript上传照片,并附上实例代码。

在使用javascript上传照片之前,我们需要了解一些常用的上传控件,比如input type="file"控件和FileReader对象。input控件可以选择文件,而FileReader对象可以读取选中的文件的内容,这些都是上传照片时必须用到的工具。

<input type="file" id="inputPhoto">
var fileInput = document.getElementById("inputPhoto");
fileInput.addEventListener("change", function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file);
});

通过上述代码,我们可以实现上传照片并在页面上显示的功能。当用户选择需要上传的照片时,change事件便会被触发。我们通过input控件来获取文件,再通过FileReader的readAsDataURL方法将文件传递给img标签的src属性中,并显示在页面上。

上传照片时,我们通常会需要将照片上传至服务器,这时需要使用到FormData对象和XMLHttpRequest对象。FormData对象用于存储表单的数据,而XMLHttpRequest对象则用于向服务器发送请求及接收响应。下面我们来看一下如何使用这两个对象上传照片。

<form id="uploadForm">
<input type="file" id="inputPhoto" name="photo">
<input type="submit" value="上传">
</form>
var uploadForm = document.getElementById("uploadForm");
uploadForm.addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(uploadForm);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.onload = function() {
alert(xhr.responseText);
}
xhr.send(formData);
});

在上述代码中,我们使用了form标签来包裹input控件,并添加了一个提交按钮。在submit事件发生时,我们阻止了表单的默认提交行为,使用FormData对象来获取表单数据,并发送一个POST请求到服务器。

以上就是使用javascript实现上传照片的简单示例。上传照片的功能在实际开发中非常常见,希望这篇教程能够对大家有所帮助。