精华内容
下载资源
问答
  • 利用Ajax上传二进制文件

    千次阅读 2016-03-13 10:33:16
    网页文件 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name=&...

    网页文件

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>利用Ajax上传二进制文件</title>
    <script type="text/javascript">
        window.onload = function() {
    		var file = null,
    			fileName = null,
    			xhr = null;
    		function upload(url) {
    		    var fileInput = document.getElementById("fileInput");
    		    fileInput.addEventListener("change", function() {
    				file = this.files[0];
    				fileName = file.name;
    				xhr = new XMLHttpRequest();
    				xhr.open("POST", url);
    
    				// 这里会自动设置好请求头
    				
    				xhr.send(file); // 直接上传二进制文件
    		    }, false);
    		}
    	
    		var uploadBtn = document.getElementById("upload");
    		uploadBtn.onclick = function() {
    		    upload("/Ajax/FileUploader");
    		};
        };
    </script>
    </head>
    <body>
    	<input type="file" id="fileInput" multiple>
    	<input type="button" id="upload" value="click to upload">
    </body>
    </html>
    

    后台简单处理

    package cn.chd.fileupload;
    
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class FileUploader
     */
    public class FileUploader extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    	int count = 1;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		String path = this.getServletContext().getRealPath("/upload");
    		InputStream in = request.getInputStream();
    		String contentType = request.getContentType();
    		
    		// 这里是为了获取文件扩展名,有点小问题
    		String extention = contentType.substring(contentType.indexOf('/') + 1);
    		OutputStream out = new FileOutputStream(path + "\\" + (count++) + "." + extention);
    		int len = -1;
    		byte[] buffer = new byte[1024];
    
    		while ((len = in.read(buffer)) != -1) {
    			out.write(buffer, 0, len);
    		}
    
    		in.close();
    		out.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }
    
    
    展开全文
  • 主要介绍了JavaScript读二进制文件并用ajax传输二进制流的方法的相关资料,需要的朋友可以参考下
  • 服务端test.phpif (isset($_POST['upload'])) {var_dump($_FILES);move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');//header('location: ...exit;}上传端index.htmlHTML5 Ajax Uploa...

    服务端test.php

    if (isset($_POST['upload'])) {

    var_dump($_FILES);

    move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');

    //header('location: test.php');

    exit;

    }

    上传端index.html

    HTML5 Ajax Uploader

    /*原生JS版*/

    document.getElementById("upJS").onclick = function() {

    /* FormData 是表单数据类 */

    var fd = new FormData();

    var ajax = new XMLHttpRequest();

    fd.append("upload", 1);

    /* 把文件添加到表单里 */

    fd.append("upfile", document.getElementById("upfile").files[0]);

    ajax.open("post", "test.php", true);

    ajax.onload = function () {

    console.log(ajax.responseText);

    };

    ajax.send(fd);

    }

    /* jQuery 版 */

    $('#upJQuery').on('click', function() {

    var fd = new FormData();

    fd.append("upload", 1);

    fd.append("upfile", $("#upfile").get(0).files[0]);

    $.ajax({

    url: "test.php",

    type: "POST",

    processData: false,

    contentType: false,

    data: fd,

    success: function(d) {

    console.log(d);

    }

    });

    });

    展开全文
  • 遇到了一个上传文件和下载文件的业务,利用ajax实现,上传单文件整体上传,不进行分片上传相对简单,这里也暂不讨论大文件分片上传的情况,后面可能会写这个。下载文件如果后端返回链接可以直接赋值给a的href点击...

    遇到了一个上传文件和下载文件的业务,利用ajax实现,上传单文件整体上传,不进行分片上传相对简单,这里也暂不讨论大文件分片上传的情况,后面可能会写这个。下载文件如果后端返回链接可以直接赋值给a的href点击或者window.location.href下载,但是后端如果返回的是文件流则需要进行处理再下载。

    这里都会用到FormData构造方法,先了解一下FormData:

    FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接。FormData()创建一个新的 FormData 对象。使用formData的append方法将新值追加到FormData对象内的现有键上,或者添加该键(如果该键尚不存在)。

    上传文件:jqAjax方法

    //上传和文件
    function upLoadFile({ url, name = '', data = '', } = {}) {
        if (!url) {
            return;
        }
        let FD = new FormData();
        FD.append(name, data);
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                type: 'POST',
                data: FD,
                processData: false, //很重要,告诉jq不要对data数据进行处理
                contentType: false, //很重要,指定为false才能形成正确的content-type
                success: function(data) {
                    resolve(data);
                }
            })
        });
    }

    上传文件:原生实现

    function upLoadFile({ url, name = '', data = '', } = {}) {
        if (!url) {
            throw new Error('the url para is invalid');
        }
        let formData = new FormData();
        formData.append(name, data);
    
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(xhr.response);
                }
            }
    
            xhr.send(formData);
        })
    
    }

    下载文件的时候,如果后端直接返回的是一个URL链接,那么你直接可以把这个链接赋给a标签的href然后在点击就可以下载了,或者把这个链接赋值给window.location.href即可立即下载。

    但是如果后端返回给前端的是二进制格式的文件流,那么前端就需要把这个二进制流进行转换生成URL对象,然后赋值给a标签进行点击触发下载。

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

    下载文件:原生实现:

    //下载文件
    function downLoadFile({ url, dataSend = {}, fileName = 'name' } = {}) {
        if (!url) {
            throw Error('ajaxData function need a valid url');
        }
    
        let formData = new FormData();
        for (para in dataSend) {
            formData.append(para, dataSend[para]);
        }
    
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            //处理二进制文件流
            xhr.responseType = 'blob';
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
    
                    let blob = xhr.response;
                    if (window.navigator.msSaveOrOpenBlob) { // IE浏览器下,SBIE
                        navigator.msSaveBlob(blob, fileName);
                    } else {
                        var link = document.createElement("a");
    
                        //创建一个新的URL对象,blob是用来创建 URL 的 File 对象或者 Blob 对象​
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName;
                        link.click();
    
                        //释放createObjectURL创建的URL对象
                        window.URL.revokeObjectURL(link.href);
                    }
    
                    resolve(xhr.response);
    
                }
            };
            xhr.send(formData);
        });
    }

    其实下载文件的时候传递参数的方式可以不使用FormData来创建对象传递,可以直接使用这种格式xhr.send('name=lihua&age=18');这里为了统一使用方式所以使用的FormData()来传递参数。

    这里有个坑需要注意一下,我没有写xhr.setRequesHeader("Content-type","...")。因为浏览器会根据你的传递方式进行自动选择。如果我使用FormData传递数据,那么content-type会自动变为:

    Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryvz9jM571LgaBj0TA

    而Content-Type:application/x-www-form-urlencoded; charset=UTF-8是默认的传递格式,但是如果你显示声明了这种传递方式,传递参数的时候就不再是正常看到的表单name:lihua,age:18这种对象格式。从而拿不到数据,这个时候需要将传递参数的方式转为xhr.send('name=lihua&age=18');而不是使用FormData来构造参数传递。

    上面我统一用FormData()的原因是因为,这个代码改改,封装一下就可以应对所有的ajax使用状况,所以统一一下会减少今后的疑惑。

    axios 下载

    post:

    download (params, url, name) {
      axios({
        url,
        method: 'post',
        headers: {
          'Content-Type': 'application/json;charset-UTF-8'
        },
        data: params,
        responseType: 'arraybuffer'
      }).then(res => {
        let headers = res.headers;
        let blob = new Blob([res.data], {
          type: headers['content-type']
        });
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        if (!name) {
          const fileName = headers['content-disposition'];
          name = fileName.includes('filename') ? fileName.split('=')[1] : 'download'
        }
        link.download = name;
        let evt = document.createEvent('MouseEvent');
        evt.initEvent('click', true, true);
        link.dispatchEvent(evt);
      })
    }

    有些后端他写成了get方式,其实也是可以的

    download (params, url, name) {
      axios({
        url, // url里面可以拼接参数
        method: 'get',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        params,
        responseType: 'blob' //根据需要定
      }).then(res => {
        let headers = res.headers;
        let blob = new Blob([res.data], {
          type: headers['content-type']
        });
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        if (!name) {
          const fileName = headers['content-disposition'];
          name = fileName.includes('filename') ? fileName.split('=')[1] : 'download'
        }   
        //如果name是乱码则需要先经过escape和decodeURIComponent处理
        name = decodeURIComponent(escape(name));
        link.download = name;
        let evt = document.createEvent('MouseEvent');
        evt.initEvent('click', true, true);
        link.dispatchEvent(evt);
      })
    }

     

    展开全文
  • 使用XMLHTTPRequest(ajax)在客户端和服务器之间传输数据已经流行了一段时间... 这篇文章将介绍如何使用XMLHTTPRequest和jQuery实现它使用XMLHTTPRequest下载二进制文件对于XMLHTTPRequest,只需将XHR实例的responseT...

    使用XMLHTTPRequest(ajax)在客户端和服务器之间传输数据已经流行了一段时间。 有时,我们希望浏览器从服务器(如ArrayBuffer或Blob)检索二进制数据,例如pdf,image和psd文件。 这篇文章将介绍如何使用XMLHTTPRequest和jQuery实现它

    使用XMLHTTPRequest下载二进制文件

    对于XMLHTTPRequest,只需将XHR实例的responseType设置为arraybuffer或blob即可。 例如

    var xhr=new XMLHTTPRequest();

    xhr.open("GET", url, true);

    //设置response type

    xhr.responseType = 'arraybuffer';

    xhr.addEventListener('load',function(){

    if (xhr.status === 200){

    console.log(xhr.response) // ArrayBuffer

    console.log(new Blob([xhr.response])) // Blob

    }

    })

    xhr.send();

    使用jQuery Ajax下载

    $ .ajax不支持arraybuffer或blob作为其dataType。 因此我们需要编写一个beforeSend处理程序:

    //ajax设置函数

    $.ajaxSetup({

    beforeSend:function(jqXHR,settings){

    if (settings.dataType === 'binary'){

    settings.xhr().responseType='arraybuffer';

    settings.processData=false;

    }

    }

    })

    $.ajax({

    url:url,

    dataType:"binary",

    success:function(data){

    console.log(data); //ArrayBuffer

    console.log(new Blob([data])) // Blob

    }

    })

    展开全文
  • 这次给大家带来异步的文件或图片上传ajax,异步文件或图片上传ajax的注意事项有哪些,下面就是实战案例,一起来看一下。众所周知现在的各大网站基本都设有文件上传功能,用户可以把自己喜欢的图片或其他文件放在网上...
  • 读取二进制文件: 1 function uploadAndSubmit() 2 { 3 filename=document.getElementById("str_file" ).value; 4 var form = document.forms["demoForm" ]; 5 if (filename!="" ) 6 ...
  • FormData对象将整个表单元素映射成一个对象,可实现自动拼接表单对象数据成请求参数的格式可以上传二进制数据利用FormData上传文本数据的表单:前端网页核心代码: 用户名 = 密码 = "use strict"var myform = ...
  • 当我向服务器发送一些二进制文件(如gif或jpeg)时,上传成功,但二进制数据的内容发生了变化(它总是比原始文件大小更大)。 我尝试更改内容类型或文件结果的类型,但仍不起作用。 任何人都知道如何解决这个问题?如何...
  • 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返回的图片文件二进制流),并在client端显示。第一步思考:拿到此需求, 基于程序员的狂妄心里,思考到显示...
  • 原因 后端反我们的二进制流数据,需要xmlhttprequest 2 标准中支持流文件的,并且应该使用 xhr.response作为返回 而不是responseText。 // 发送get请求,接收后端返回的文件流 export function getFile(params,
  • 前段代码需要与其他接口进行交互,ajax上传配置图片文件。代码用的是HTML5的FormData对象,FormData对象可以添加键值对来模拟我们用到的表单控件,将值转化为二进制传递。HTML表单代码:发送的图片上传的JavaScript...
  • 我需要使用必须在IE9中支持的ajax上传文件。我正在使用FormData here。我的代码如下所示:使用在IE9中工作的ajax发送文件/文件上传var files = new FormData();JQuery.each($('#file')[0].files, function (i, ...
  • 用户上传二进制文件只能用post请求,不能使用get请求 获取上传文件中的文件 <input type="file" id="file"> Files 集合返回指定的文件夹中所有文件组成的一个集合。 将用户选择文件追加到fromData...
  • 实现效果: 启动app.js 在浏览器地址栏输入http://localhost:3000/upload.html 实现代码: 客户端upload.html: (引入了bootstrap框架bootstrap.min.css) <!DOCTYPE html> <html lang="en">...
  • FormData 对象上传二进制文件

    千次阅读 2018-02-23 22:53:00
    使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html     通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以...
  • springmvc实现文件blob二进制文件上传下载 1、整体思路 2、数据库存储 3、代码实现 4、常见问题总结 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,...
  • 1首先获取到上传文件的控件 // 获取文件选择控件 var file = document.getElementById('file'); 2.获取到文件的方法 //文件控件.files[0]返回该文件 file.files[0] 3.然后给文件控件添加事件 并把文件使用...
  • FormData是XMLHttpRequest Level 2添加的一个新的接口,利用FormData对象,我们...比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。 主流手机系统基本都是webkit内核,可以使用。...
  • 客户端模板引擎 无论是客户端模板引擎还是...客户端模板引擎使用的也是art-template ... 使用步骤 下载art-template模板引擎库文件并在HTML页面中引入库文件 准备art-template模板 在HTML中没有模板的块语法 所以...
  • FormData是XMLHttpRequest Level 2添加的一个新的接口,利用FormData对象,我们...比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。主流手机系统基本都是webkit内核,可以使用。var f...
  • 与普通的 Ajax 相比,使用 FormData的最大优点就是我们可以异步上传二进制文件。 边学边做,我也尝试做了一个上传图片的功能,如果以前可能要使用form提交或其他黑魔法,现在使用FormData就可以实现。 但是...
  • 总而言之,我如何将base64图像转换为序列化的二进制流,其中每个像素都由16位表示. UPDATE 我忘了提到我正在使用python3.2 经过更多研究后,我认为我要尝试执行的操作将获得给定像素的mono16值.我不确定这是否是我想要...
  • MySql二进制日志文件解析系统 先看看最后的一个结果: 一、前期准备 1、前端框架 element-ui:Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI 。 vue.js:是一套...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,028
精华内容 5,611
关键字:

ajax上传二进制文件