首页 > Web开发 > 详细

利用ajaxFileUpload实现像qq邮箱一样异步上传文件

时间:2017-01-12 07:56:44      阅读:249      评论:0      收藏:0      [点我收藏+]

首先是jsp页面代码,非常简单。

<a href="javascript:;" class="file">选择文件
                <input type="file" name="upFile" id="upFile" >
</a>
<div id="upfile"></div>

 

 

 

 

接下来是js代码

$(function() {
    $(".file").on("change", "input[type=‘file‘]", function() {
        var filePath = $(this).val();
        if (filePath.indexOf("exe") != -1) {
            $("#upfile").html("");
            $("#upfile").html("您未上传文件,或者您上传文件类型有误!").show();
            return false;
        } else {
            ajaxFileUpload(filePath);

        }
    });
});

function ajaxFileUpload(filePath) {
    var uploadMan = $("#cnName").val();
    var id = $("#id").val();
    $.ajaxFileUpload({
        url : ""+ id,// 用于文件上传的服务器端请求地址
        secureuri : false,// 一般设置为false
        type : ‘post‘,
        fileElementId : ‘upFile‘,// 文件上传控件的id属性
        dataType : ‘JSON‘,// 返回值类型 一般设置为json
        success : function(msg) // 服务器成功响应处理函数
        {
            parent.$.messager.alert(‘提示‘, msg);
            var fileName = getFileName(filePath);
            function getFileName(o) {
                var pos = o.lastIndexOf("\\");
                return o.substring(pos + 1);
            }
            var postion = fileName.lastIndexOf(".");
            var fileId = fileName.substring(0, postion);

            var addfile = "<div id=‘del" + fileId + "‘>" + "文件:" + fileName
                    + "  <a href=‘javascript:;‘>删除</a>" + "<br/></div>";
            $("#upfile").append(addfile);
            $("#del" + fileId).click(function() {
                $.ajax({
                    type : "POST",
                    url : "caseReqFile_delete.action?fileName=" + fileName,
                    success : function(msg) {
                        parent.$.messager.alert(‘提示‘, msg);
                        $("#del" + fileId).remove();
                    }
                });
            });

        },
    });
    return false;
}

 

利用ajaxFileUpload实现像qq邮箱一样异步上传文件

原文:http://www.cnblogs.com/HoverChen/p/6274361.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!