文档章节

无刷新上传HTML+JS(支持chrome并已测试)

vvx1024
 vvx1024
发布于 2014/07/15 17:31
字数 315
阅读 229
收藏 21

待解决:多个文件同时上传(既然可以接受多个input域的表单上传,一定可以上传FIle数组,但测试未成功,有待解决)


最近想做无刷新上传,网上搜索N久,找到一个方法,记录之。

ajaxfileupload.js 是一个jquery插件,但是调了两天都没成功。。继续网上寻找解决方法,看到一个使用

XMLHttpRequest 和 FormData 对象实现的,原文链接:http://itindex.net/blog/2012/04/14/1334367483953.html

原文未使用jquery。。。下面是我稍作修改的代码,获取File对象还是有些笨。。有更好的方法希望您留个言哈。。

废话不多说了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script>
        function performAjaxSubmit() {
            var text = $("#filename").val();
            //var file = document.getElementById("file1").files[0];
            var file = $("#file1")[0].files[0];

            var formdata = new FormData();
            formdata.append("filename", text);
            formdata.append("file1", file);

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/upload-mvc-txt.do", true);
            xhr.send(formdata);
            xhr.onload = function (e) {
                if (this.status == 200) {
                    alert(this.responseText);
                }
            };
        }
    </script>
</head>
<body>
<img id="loading" src="./images/loading.gif" style="display:none;"/>
<input id="file1" type="file" size="20" name="file1"/>
<input id="filename" name="filename" type="text" />
<button class="button" id="buttonUpload" onclick="performAjaxSubmit()">上传</button>
</body>
</html>

可以修改input:file的样式,移步: http://my.oschina.net/cwzhang/blog/291398

© 著作权归作者所有

共有 人打赏支持
vvx1024
粉丝 4
博文 49
码字总数 18959
作品 0
海淀
程序员
私信 提问
Chrome 已将消息通知整合到 Windows 10 的通知中心

今年 3 月初有消息指出,Google 将会在 Chrome 浏览器中添加对原生 Windows 10 通知的支持,但是具体会在什么时候推出该功能不得而知,然而近日谷歌员工 Peter Beverloo 在 Twitter 上透露,...

h4cd
2018/08/10
2.3K
5
google chrome这是怎么呢?

前几天尝试使用 kindeditor ,发现点击图片按钮后,弹出的上传图片框中没有任何按钮 最后firefox中发现一切正常。 刚才尝试使用 iframe 来做无刷新的上传 可是chrome 又悲剧了, 页面直接给转...

the4king
2011/05/23
262
1
[译] 如何使用原生 JavaScript 构建简单的 Chrome 扩展程序

原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 原文作者:Sara Wegman 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Shery 校对者:P...

shery
2018/09/12
0
0
OpenCart拖放式图片管理器

OCT图片管理器是您解决OpenCart后台图片管理的优选方案,具有支持一次性上传多个图片,可以记住浏览器最近打开的文件夹,拖放式上传图片,重定义图片大小,旋转图片,检索图片等众多功能。 ...

OpenCart中国
2013/10/25
959
0
OpenCart拖放式图片管理器

OCT图片管理器是您解决OpenCart后台图片管理的优选方案,具有支持一次性上传多个图片,可以记住浏览器最近打开的文件夹,拖放式上传图片,重定义图片大小,旋转图片,检索图片等众多功能。 ...

OpenCart中国
2013/10/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vert.x系列(二)--EventBusImpl源码分析

前言:Vert.x 实现了2种完成不同的eventBus: EventBusImpl(A local event bus implementation)和 它的子类 ClusteredEventBus(An event bus implementation that clusters with other Ve......

冷基
40分钟前
1
0
Perl - 获取文件项目

参考:http://www.runoob.com/perl/perl-directories.html 下面返回JSON格式的文件列表 #!/usr/bin/perluse strict;use warnings;use utf8;use feature ':5.26';require Fi......

wffger
昨天
2
0
vue组件系列3、查询下载

直接源码,虽然样式样式不好看,逻辑也不是最优,但是可以留作纪念。毕竟以后类似的功能只需要优化就可以了,不用每次都重头开始。。。 <template> <div class="pre_upload"> <div ...

轻轻的往前走
昨天
2
0
java浅复制和深复制

之前写了数组的复制,所以这里继续总结一下浅复制和深复制。 浅拷贝:对基本数据类型进行值传递,对引用数据类型进行引用传递般的拷贝。 深拷贝:对基本数据类型进行值传递,对引用数据类型,...

woshixin
昨天
1
0
kubernetes 二进制包安装

环境 角色 主机名 内网 IP 集群 IP 操作系统 服务 执行目录 部署机 k8s-master master120 10.0.4.120 - CentOS kube-apiserver kube-scheduler kube-controller-manager /opt/kubernetes/ et......

Colben
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部