现在的社交网络越来越发达,大家也都喜欢上传自己的照片与朋友分享。在网页上,我们也需要实现上传照片的功能。而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实现上传照片的简单示例。上传照片的功能在实际开发中非常常见,希望这篇教程能够对大家有所帮助。