我想用jQuery异步上传文件。

$(文档).ready(函数(){$(“#uploadbutton”).click(函数(){var filename=$(“#file”).val();$.ajax美元({类型:“POST”,url:“addFile.do”,enctype:'多部分/表单数据',数据:{文件:文件名},成功:函数(){alert(“上传的数据:”);}});});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js“></script><span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input id=“uploadbutton”type=“button”value=“Upload”/>

我只得到文件名,而不是上传文件。我可以做什么来解决这个问题?


当前回答

使用|HTML5的readAsDataURL()或一些base64编码器将文件转换为base64。在这里摆弄

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

然后检索:

window.open("data:application/octet-stream;base64," + base64);

其他回答

Simple Ajax Uploader是另一个选项:

https://github.com/LPology/Simple-Ajax-Uploader

跨浏览器——适用于IE7+、Firefox、Chrome、Safari和Opera支持多个并发上传——即使在非HTML5浏览器中也是如此没有flash或外部CSS——只有一个5Kb的Javascript文件可选,内置支持完全跨浏览器进度条(使用PHP的APC扩展)灵活且高度可定制——使用任何元素作为上传按钮,设置自己的进度指示器不需要表单,只需提供一个元素作为上传按钮麻省理工学院许可证——在商业项目中免费使用

示例用法:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

使用HTML5和JavaScript,异步上传非常容易,我创建了上传逻辑和html,这不是完全有效的,因为它需要api,但演示了它是如何工作的,如果你有一个名为/upload的端点从你的网站的根目录,这段代码应该适合你:

const asyncFileUpload=()=>{const fileInput=document.getElementById(“文件”);const file=文件输入文件[0];const-uri=“/upload”;const-xhr=新XMLHttpRequest();xhr.upload.onprogress=e=>{常量百分比=e.loaded/e.total;console.log(百分比);};xhr.onreadystatechange=e=>{如果(xhr.readyState==4&&xhr.status==200){console.log(“文件已上载”);}};xhr.open(“POST”,uri,true);xhr.setRequestHeader(“X-FileName”,文件名);xhr.send(文件);}<表单><span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input onclick=“asyncFileUpload()”id=“upload”type=“button”value=“upload”/></form>

还有一些关于XMLHttpReques的进一步信息:

XMLHttpRequest对象所有现代浏览器都支持XMLHttpRequest对象。XMLHttpRequest对象可用于与web交换数据幕后服务器。这意味着可以更新而不重新加载整个页面。


创建XMLHttpRequest对象所有现代浏览器(Chrome、Firefox、,IE7+、Edge、Safari、Opera)有一个内置的XMLHttpRequest对象。创建XMLHttpRequest对象的语法:variable=new XMLHttpRequest();


跨域访问出于安全原因,现代浏览器不会允许跨域访问。这意味着网页和它试图加载的XML文件,必须位于同一服务器上。W3Schools上的示例都是位于W3Schools中的XML文件领域如果您想在自己的网页上使用上面的示例您加载的XML文件必须位于您自己的服务器上。

有关详细信息,请继续阅读此处。。。

为此,我建议使用Fine Uploader插件。您的JavaScript代码为:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

如果使用承诺使用哪种ajax,并检查文件是否有效并保存在后端,那么您可以在用户浏览页面时在前面使用一些动画。

您甚至可以使用递归方法使其并行上传或堆叠

没有Jquery的现代方法是,当用户选择一个文件时,使用从<input type=“file”>返回的FileList对象,然后使用Fetch发布包裹在FormData对象周围的FileList。

// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // You can then post it to your server.
    // Fetch can accept an object of type FormData on its  body
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});