.net 实现form表单数据及图片上传

1）

<form id="testForm">

 <a class="file">
                                <label>选择文件</label>
                                <input type="file" name="file11" id="files">
 </a>

<input type="text" value/>

</form>

2)javascript

 $(".file").on("change", "input[type='file']", function () {
        var filePath = $(this).val();
            var arr = filePath.split('\\');
            var fileName = arr[arr.length - 1];
            $(".file>label").html(fileName);
    })

3)

ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 

ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。 

4)

var ajax_option={

url:"login",//默认是form action

success:function(data){

}

$('#testForm').ajaxSubmit(ajax_option);

}

选择文件按钮:

选择文件后：

按钮样式：

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}


    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }


    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }