前端开发无刷新上传文件的方法

网页前端开发图片上传|web前端开发软件需要上传吗|前端开发怎么上传图片

首先是第一种-使用FormData上传文件,formdata可以封装form标签对象,其中对象中是以键值对的形式存在的。我们可以使用append方法来添加键值,如:
javascript 代码

var oMyForm = new FormData();
oMyForm.append(“name”, “ZhangSan”);

具体的用法大家可以上网查一查,这里我就直接来上代码介绍如何使用formData来上传图片:
html代码:
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发图片太大怎么做适配</title>
</head>
<body>
    <form>
        <input type=”text” name=”firstname”>
        <input type=”file” id=”file” name=”file”>
        <button stye=”submit” id=”submit”>提交</button>
    </form>
    <script>
        document.getElementById(‘submit’).onclick = function (event) {
            if (event.preventDefault) {//取消按钮默认提交行为
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
            var formDOM = document.getElementsByTagName(‘form’)[0];
            var formData = new FormData(formDOM);//创建formData对象
            var req = new XMLHttpRequest();
            req.open(“POST”, “upload.php”);//使用POST发送请求
            req.onload = function (event) {
                if (this.status === 200) {
                    console.log(this.response);//请求成功后打印返回的结果
                }
            }
            req.send(formData);
            req = null;
        }
    </script>
</body>
</html>

注释对代码进行了介绍,就是把formData通过ajax发到后端去。

然后php代码:
javascript 代码

<?php
$firstname = $_POST[‘firstname’];
$filename = time() . substr($_FILES[‘file’][‘name’], strrpos($_FILES[‘file’][‘name’],’.’));
$response = array();
if(move_uploaded_file($_FILES[‘file’][‘tmp_name’], $filename)){
$response[‘status’] = 1; //成功
$response[‘filename’] = $filename;
$response[‘firstname’] = $firstname;
} else {
$response[‘status’] = -1;
}
echo json_encode($response);
?>

这样就可以后端就会保存到图片了。以上,整个上传图片的流程结束。

接下来是使用iframe来无刷新上传文件的demo

普通的<input type=”submit”>按钮,点击后页面会跳转到提交的地址,而这个地址是根据form标签的target属性指定的,所以只要我们创建个iframe标签,然后指定跳转到这个iframe地址就可以获取到后端返回的数据,也不用跳转页面了,拿到数据后,再把iframe删掉就可以了,具体代码如下:
HTML代码:
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
</head>
<body>
    <form action=”upload1.php” method=”post” enctype=”multipart/form-data”>
        <input type=”text” name=”firstname”>
        <input type=”file” id=”file” name=”file”>
        <input type=”submit” id=”submit” value=”提交”>
    </form>
    <script>
        document.getElementById(‘submit’).onclick = function (event) {
            var iframe = document.createElement(“iframe”);
            iframe.width = 0;
            iframe.height = 0;
            iframe.border = 0;
            iframe.name = “form-iframe”;
            iframe.id = “form-iframe”;
            iframe.setAttribute(“style”, “width:0;height:0;border:none”);
            this.form.appendChild(iframe);
            this.form.target = “form-iframe”;
            iframe.onload = function () {
                var img = document.createElement(“img”);
                var responseData = this.contentDocument.body.textContent || this.contentWindow.document.body.textContent;//获取iframe的内容,即服务返回的数据
                var json = JSON.parse(responseData);//后端返回的json
                console.log(json);
                img.src = json.filename;
                document.getElementsByTagName(“form”)[0].appendChild(img);//显示图片
                setTimeout(function () {//删掉iframe
                    var _frame = document.getElementById(“form-iframe”);
                    _frame.parentNode.removeChild(_frame);
                }, 100);
            }
        }
    </script>
</body>
</html>

上面的按钮点击函数里,就是创建iframe标签,然后通过target属性指定到这个iframe,再在iframe的load函数里,或者后端返回的数据,拿到数据后,再删除iframe.
php代码:
javascript 代码

<?php
$firstname = $_POST[‘firstname’];
$filename = time() . substr($_FILES[‘file’][‘name’], strrpos($_FILES[‘file’][‘name’],’.’));
$response = array();
if(move_uploaded_file($_FILES[‘file’][‘tmp_name’], $filename)){
$response[‘status’] = 1; //成功
$response[‘filename’] = $filename;
$response[‘firstname’] = $firstname;
} else {
$response[‘status’] = -1;
}
echo json_encode($response);
?>

php后端代码和第一种没有什么区别,都是获取表单数据。

微信公共号开发前端|微信公共号开发前端|前端web开发技术架构设计

» 本文来自:前端开发者 » 《前端开发无刷新上传文件的方法》
» 本文链接地址:https://www.rokub.com/4943.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!