利用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 阅读( ...) 评论( ...) 编辑 收藏