JS异步上传文件

直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写。

/*
    *异步上传文件
    *option参数
    **url:上传路径
    **data:上传的其他数据{id:"1"}
    **maxSize:文件最大值(单位M)
    * img:"#qrimg",
    **callback:回调函数(可空)
    **beforeSend:上传前函数(可空)
    */
    function Upload(option) {
        var fd = new FormData(),
            xhr = new XMLHttpRequest(),
            input;
        if (document.getElementById(‘_RobinUploadInput‘)) {
            input = document.getElementById(‘_RobinUploadInput‘);
        } else {
            input = document.createElement(‘input‘);
            input.setAttribute(‘id‘, ‘_RobinUploadInput‘);
            input.setAttribute(‘type‘, ‘file‘);
            input.setAttribute(‘name‘, ‘file‘);
            document.body.appendChild(input);
            input.style.display = ‘none‘;
        }
        input.click();
        input.onchange = function () {
            if (!input.value) { return; }
            if (option.maxSize && input.files[0].size > option.maxSize * 1024 * 1024) {
                alert("请上传小于‘ + option.maxSize + ‘M的文件");
                return;
            }
            if (option.beforeSend instanceof Function) {
                if (option.beforeSend(input) === false) {
                    return false;
                }
            }
            if (option.data) {
                for (var name in option.data) {
                    fd.append(name, option.data[name]);
                }
            }
            if (option.img) {
                var $img = $(option.img);
                var windowURL = window.URL || window.webkitURL;
                dataURL = windowURL.createObjectURL(input.files[0]);
                $img.attr(‘src‘, dataURL);
            }
            fd.append(‘Filedata‘, input.files[0]);
            xhr.open(‘post‘, option.url);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200) {
                    if (xhr.readyState == 4) {
                        if (option.callback instanceof Function) {
                            option.callback(xhr.responseText);
                        }
                    }
                } else {
                    alert("上传失败");
                }
            }
            xhr.upload.onprogress = function (event) {
                var pre = Math.floor(100 * event.loaded / event.total);
                if (option.uploading instanceof Function) {
                    option.uploading(pre);
                }
            }
            xhr.send(fd);
        }
    }

资料获取方式,关注公总号RaoRao1994,查看往期精彩-所有文章,即可获取资源下载链接

更多资源获取,请关注公总号RaoRao1994

原文地址:https://www.cnblogs.com/raorao1994/p/10862752.html

时间: 2024-11-10 13:52:49

JS异步上传文件的相关文章

利用ajaxfileupload.js异步上传文件

1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="enclosure"> <button id="upClick" >上传</button> 注意这里的input控件的id和name必须一致:这样在后台利用springMVC接受文件的时候能对应起来: 3.JS代码 <script type=&q

使用ajaxfileupload.js异步上传文件到Servlet

前段时间帮同学做的毕业设计..好吧又是帮人做...需要上传文件,在这里使用了ajaxfileupload.js进行异步的上传文件到Servlet  ,后台保存了文件以后通过JSON返回文件路径到前端,好了废话不多说,直接上代码了... 前端页面比较简单 <input maxlength=16 type=file name="pic" id="pic" size=16 />  <input type="button" id=&qu

关于js异步上传文件

好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件还有别的信息需要交互,跟后端商量后决定文件单独上传,获取到服务器端返回的文件地址在和表单一起提交.这里就需要异步上传文件. 在网上扒了扒相关的内容,发现还真不少,阮一峰老师的这篇文章(文件上传的渐进式增强)就介绍的很具体,下面就谈谈自己在实战中遇到的一些问题的感受吧. 先看看效果,实现了哪些功能 (

Node.js——异步上传文件

前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.append("file", file); formData.append("username", this.username); formData.append("password", this.password); axios.post("

ajaxfileupload.js 异步上传文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ include file="/WEB-INF/views/include/taglib.jsp"%><%String path = request.getContextPath();String basePath = request.getScheme()

使用ajaxfileupload.js文件异步上传文件

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script src="

jQuery插件-ajaxFileUpload异步上传文件

ajaxFileUpload是前两天学习过程中接触到的一个JQ插件,功能很简单,就是实现异步上传文件的功能. 1.语法介绍 $.ajaxFileUpload([setting]); 参数说明: (1)url——执行上传处理的地址: (2)secureuri——是否启用安全提交,默认为false: (3)fileElementId——需要上传<input type=”file”>控件id属性值: (4)data——自定义参数,即需要额外传递的JSON格式数据: (5)type——请求方式,提交自

struts2 jquery ajaxFileUpload 异步上传文件

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起.但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面.在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因.我的修改: 原文件: var oldElement = $('#' +

异步上传文件多种方式归纳

最近在做异步上传文件的工作,用到了一些库,这里归纳下,暂且不考虑异常处理,仅作为demo. 1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm