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

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

首先是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;
}

 

posted @ 2017-01-11 16:58 HoverChen 阅读( ...) 评论( ...) 编辑 收藏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值