一个使用jquery.form.js上传图片的小demo

百度的例子没办法直接跑，后来调试好了就贴出来分享了

[JavaScript] 纯文本查看 复制代码

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.form.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnSub").click(function () {
            var options = {
                url: "/Home/ProcessImgUpload",
                dataType:"text",
                success: afterUpload,
                error: function (data, status, e) {
                    alert("失败！");
                }  

            };
            $("#frm").ajaxSubmit(options);
            return false;
        });
    });
    function afterUpload(data) {
        $("#result").html("<img src='" + data + "'/>");
    }
</script>

[HTML] 纯文本查看 复制代码

 <div>
        <form data-ajax="true" data-ajax-method="Post" data-ajax-success="afterUpload" enctype="multipart/form-data" id="frm" method="post">
            <input type="file" name="imgFile" id="imgFile" />
            <input type="submit" id="btnSub" value="异步上传图片" />
        </form>
        <div id="result"></div>
    </div>

[C#] 纯文本查看 复制代码

    public string ProcessImgUpload()
        {
            var file = Request.Files["imgFile"];
            string[] files = GetFileInfo(file.FileName);
            string path = "/Upload/" + Guid.NewGuid().ToString() + files[1] + "." + files[2];
            string savepath = Request.MapPath(path);
            file.SaveAs(savepath);
            return path;
        }

GetFileInfo是我截取图片路径的方法

叶子牛逼！

叶子牛逼！