js上传文件

最新推荐文章于 2024-05-06 11:40:47 发布

subuser

最新推荐文章于 2024-05-06 11:40:47 发布

阅读量3w

点赞数

分类专栏： js 文章标签： jquery ajax

本文链接：https://blog.csdn.net/subuser/article/details/47188623

版权

一、原始的XMLHttpRequestjs上传文件过程(参考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html)

用到两个对象
第一个对象：FormData
第二个对象：XMLHttpRequest
目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....
有了这两个对象，我们可以真正的实现Ajax方式上传文件。
示例代码：
<!DOCTYPE html>
<html>
<head>
    <title>Html5 Ajax 上传文件</title>
    <script type="text/javascript">
        function UpladFile() {
            var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象
            var FileController = "../file/save";                    // 接收上传文件的后台地址
            // FormData 对象
            var form = new FormData();
            form.append("author", "hooyes");                        // 可以增加表单数据
            form.append("file", fileObj);                           // 文件对象
            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("post", FileController, true);
            xhr.onload = function () {
                alert("上传完成!");
            };
            xhr.send(form);
        }
</script>
</head>
<body>
<input type="file" id="file" name="img1" />
<input type="button" οnclick="UpladFile()" value="上传" />
</body>
</html>

java 代码：

    private File img1;

    private String img1FileName;

    private String img1ContentType;

    private String saveFile() {
        int lastDotIndex = img1FileName.lastIndexOf(".");
        String imgType = img1FileName.substring(lastDotIndex - 1, img1FileName.length());
        String tempName = UploadImgTempFilePath.getUploadFilePath() + UUID.randomUUID() + imgType;
        try {

            // 建立文件输出流
            FileOutputStream fos = new FileOutputStream(tempName);
            // 建立文件上传流
            FileInputStream fis = new FileInputStream(img1);
            byte[] buffer = new byte[1024];
            int len = 0;
            while ((len = fis.read(buffer)) > 0) {
                fos.write(buffer, 0, len);
            }
            fis.close();
            fos.close();
        } catch (Exception e) {
            return null;
        }
        return tempName;

    }

二、使用ajax的插件ajaxfileupload(参考地址：http://www.cnblogs.com/linjiqin/p/3530848.html)

引入js：

<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%

最低0.47元/天解锁文章

subuser

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
js上传文件

一、原始的XMLHttpRequestjs上传文件过程(参考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html)用到两个对象第一个对象：FormData第二个对象：XMLHttpRequest目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，
复制链接

扫一扫

专栏目录