首页 > 试题广场 >

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

[问答题]

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

添加回答
何必讨好✘๊头像 何必讨好✘๊
js 的 能过七题内存就超了 
var lines = readline().split(' ');
var n = parseInt(lines[0]);
var m = parseInt(lines[1]);
 
var resultArr = new Array(n);
for(var i = 1; i <= n; i++) {
    resultArr[i - 1] = i;
}
 
console.log(resultArr.sort()[m-1]);


发表于 2022-02-28 22:16:50 回复(0)
南邮kd头像 南邮kd
<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)
牛客382450号头像 牛客382450号 
<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)
考拉812头像 考拉812
获取文件对象
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)
lotoze201810042134789头像 lotoze201810042134789
<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)
zm0422头像 zm0422
<!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)
石壹笑头像 石壹笑
<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)
提交观点

问题信息

2017 前端工程师 字节跳动 Javascript
来自：字节跳动2017秋招前...
上传者：牛妹
难度：
8条回答 5784浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号