首页 > 试题广场 > 给出一个上传文件时不用刷新页面的方案,要求写出关键部分的js
[问答题]

给出一个上传文件时不用刷新页面的方案,要求写出关键部分的js代码。

<input id="upload" type="file" />
<button id="upload-btn"> upload </button>

document.getElementById('upload-btn').onclick = function(){
varinput = document.getElementById('upload');
varfile = input.files[0];
varformData = newFormData();
forData.append('file',file);
fetch({
url:'/upload',
mothod:'POST',
body:formData
})
.then((d)=>{
console.log('result is',d);
alert('上传完毕');
})
}

编辑于 2017-07-30 16:34:43 回复(0)
获取文件对象
var fileObj = document.getElementById("file").files[0];
// 接收上传文件的后台地址
var url =  "http://localhost:8088/upload";
var form = new FormData();
form.append("file", fileObj);
xhr = new XMLHttpRequest();

xhr.open("post", url, true);
// 上传完成
xhr.onload = uploadComplete;
// 上传失败
xhr.onerror =  uploadFailed;

//开始上传,发送form数据
xhr.send(form);


//上传成功响应
function uploadComplete(evt) {
    //服务断接收完文件返回的结果

    var data = JSON.parse(evt.target.responseText);
if(data.success) {
    alert("上传成功!");
}else{
    alert("上传失败!");
}
发表于 2021-08-17 20:43:46 回复(0)
<input type="file"  id="file"/>
<button id="upload">点击上传</button>

var file = document.getElementById("file");
var upload = document.getElementById("upload");
var ajax = new XMLHttpRequest();
ajax.open("POST", "您的url");
ajax.send(file.value);
window.onreadystatechange = funcation () {
    if(ajax.readyState === 4; ajax.status === 200){
        var response = ajax.responseText;
    }
}
发表于 2019-07-14 01:30:07 回复(0)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<input id="ipt1" type="file"/>
<button id="btn1">上传</button>
<script src="https://unpkg.com/axios/dist/axios.min.js">
 var file = document.getElementById("ipt1").files[0]
 var formData = new FormData();
 formData.append('file',file);
 axios.post('/',{formData})
   .then(function (response) {
   console.log(response);
 })
   .catch(function (error) {
     console.log(error);
   });
</script>
</head>
</html>
发表于 2019-04-12 15:45:58 回复(0)
使用ajax实现页面不刷新
发表于 2018-08-24 21:04:03 回复(0)
<input id="upload" type="file" />
<button id="upload-btn"> upload </button>
<script>
document.getElementById('upload-btn').onclick = function(){  
    var input = document.getElementById('upload');
    //选取文件;
    var file = input.files[0];
    //创建表单数据对象;
    var formData = new FormData();
    //将文件添加到表单对象中;
    formData.append('file',file);
    //传输;
    fetch({
    url:'',
    mothod:'POST',
    body:formData 
    }) 
    .then((d)=>{
    console.log('result is',d);
    })
}
</script>
发表于 2017-08-02 22:12:02 回复(1)
<div class="upload-wrap">
                        <div class="upload-local" id="upload-img">
                            <a href="javascript:;" onclick="getElementById('inputfile').click()">本地上传</a>
                            <input type="file" name="picture" style="opacity:0;filter:alpha(opacity=0);" id="inputfile" />
                        </div>
                        <div class="img-show" id="img-show">
                            <if condition="$data['picture'] neq ''"><img src="{$data['picture']}" width="135" height="75"></if>
                        </div>
                    </div>

$(document).ready(function() {
    $("#inputfile").change(function() {
        //创建FormData对象
        var data = new FormData();
        //为FormData对象添加数据
        //
        $.each($('#inputfile')[0].files, function(i, file) {
            data.append('fileData', file);
        });
        $.ajax({
            url: 'url',
            type: 'POST',
            data: data,
            dataType: 'json',
            ***: false,
            contentType: false, //不可缺
            processData: false, //不可缺
            success: function(data) {
                if (data.success == true) {

                    var img = $("#img-show");
                    if (img.children('img').length != 0) {

                        img.children('img').attr('src', data.file_path);
                        var img_input = '<input type="hidden" name="picture" id="picture" value="' + data.file_path + '">'
                        img.append(img_input);
                    } else if (img.children('img').length == 0) {

                        var img_show = '<img src="' + data.file_path + '" width="135" height="75">';
                        img.append(img_show);
                        var img_input = '<input type="hidden" name="picture" id="picture" value="' + data.file_path + '">'
                        img.append(img_input);
                    }
                }

            }
        });
    });
});


发表于 2017-07-28 19:32:42 回复(1)