现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实现.大多数情况,人们使用jQuery来实现,但是随着浏览器的进步,人们比不需要这么做.这里我们将介绍如何在不离开页面的情况下将文件上传到服务器，我们将使用与我们之前的文章中使用的相同的后端PHP代码. 该脚本将上传文件至服务器,同时显示上传进度,并最终返回上传文件的链接地址.在某些情况下,你可能想要返回上传文件的id或者其他的应用信息. Note: 该代码不支持较老的ie浏览器,通过Can I use我们只支持ie10+
Let's Code
我们将从HTML结构开始，然后是JavaScript，然后我将给您提供PHP代码，这部分改编于之前教程 - 对PHP代码将不会有太多的解释。
HTML
我们只需要使用两个输入框，一个是文件类型file，另一个只是一个按钮button,以便我们可以监听到它被点击发送文件上传请求。 我们还将有一个div，我们改变宽度以突出显示上传的状态。
如下所示:
<!doctype html><html><head> <meta charset="utf-8"> <title>JS File Upload with Progress</title> <style> .container { width: 500px; margin: 0 auto; } .progress_outer { border: 1px solid #000; } .progress { width: 20%; background: #DEDEDE; height: 20px; } </style></head><body> <div class='container'> <p> Select File: <input type='file' id='_file'> <input type='button' id='_submit' value='Upload!'> </p> <div class='progress_outer'> <div id='_progress' class='progress'></div> </div> </div> <script src='upload.js'></script></body></html>你将看到我们写了一点进度条样式,并在底部加入脚本文件来处理文件上传以及进度条展示.
JavaScript
首先, 我们需要拿到我们将要使用的标签,他们已经用id标记上.
var _submit = document.getElementById('_submit'), _file = document.getElementById('_file'), _progress = document.getElementById('_progress');下一步,给_submit添加点击事件,用以上传我们选择的文件.为此,我们将使用addEventListener方法,点击按钮后让其调用upload方法.
_submit.addEventListener('click', upload);现在我们可以继续处理上传,有以下几步:
检查被选中的文件
我们的文件输入框_file有一个查询被选中文件队列的参数files-如果你设置了multiple参数将可以选多个文件.我们做简单的检查判断,如果该数组长度大于0,则继续,否则直接返回.
if(_file.files.length === 0){ return;}
新闻热点
疑难解答
图片精选
