预览显示图片and上传图片保存到image里

1.引入js

<script src="~/media/jquery-1.10.1.min.js"></script>

<script src="~/media/ajaxfileupload.js"></script>

2.html页面

<label class="control-label">预览图片</label>
<img src="~/Image/1.jpg" id="img" style="width: 100px;" />
<input type="file" id="fileposition" name="file" />
<br />
<br />
<div class="submit-btn">
    <input type="button" id="btn_add" value="添加" />
</div>
<br />
<br />
<img src="~/Image/1.jpg" id="img1" style="width: 200px" />

3.script

<script type="text/javascript">

    $(function () {

        function GetImgUrl(file) {
            var url = null;
            if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            }
            return url;
        }

        //图片进行预览
        $("#fileposition").change(function () {

            var url = GetImgUrl(this.files[0]);
            $("#img").attr("src", url);
        });


        $("#btn_add").click(function () {
            var fileposition = $("#fileposition").val();
            if (fileposition == "") {
                $("#fileposition").focus();
                alert("来自网页的消息：信息填写不完整，请选择图片！");
                return;
            }
            else {
                $.ajaxFileUpload({
                    url: '/Home/Add',
                    dataType: 'json',
                    fileElementId: 'fileposition',

                    success: function (result) {
                        if (result.Code == 1) {
                            alert(result.Mes);
                            //var url = GetImgUrl(this.files[0]);
                            $("#img1").attr("src", "/Image/" + result.Names);
                        }
                        else {
                            alert(result.Mes);
                        }
                        //window.location.href = 'Index';
                    }
                })
            }
        })

        
    })

</script>

4. Controller

   public ActionResult Add()
        {

            string imgurl = "";
            if (Request.Files.Count > 0)
            {
                Guid guid = Guid.NewGuid();
                Request.Files[0].SaveAs(Server.MapPath("~") + "/Image/" + guid + Request.Files[0].FileName);
                imgurl += guid + Request.Files[0].FileName;       
                return Json(new { Code = 1, Mes = "添加成功！",Names=imgurl }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Json(new {Code =0,Mes="添加失败！" },JsonRequestBehavior.AllowGet);
            }
           
        }

注意：在项目里要创建个Image文件夹