图片上传和显示——上传图片——上传文件）==ZJ

http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传

http://www.cnblogs.com/mq0036/p/3715024.html  异步上传

-----------------------------------------ZJ版

MVC中利用ajaxfileupload.js插件实现异步上传:（这个既可以实现图片上传也可以实现文件上传）

JS引入:

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Content/UploadFile/ajaxfileupload.js"></script>

前台实现:

//Html部分
<div>
        <h2>请选择要上传的文件</h2>
        <input type="file" id="imgFile" name="imgFile" /><input type="button" value="上传" id="btnUp"/>
        <br />
        <div>
            <img id="articleFacePhotoImg" />
        </div>
    </div>
//JS引入
 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 <script src="~/Content/UploadFile/ajaxfileupload.js"></script>
//上传文件JS调用代码
<script type="text/javascript">
        //异步上传文件
        uploadFacePhoto = function () {
            //判断内容是否为空
            if ($("#imgFile").val().length <= 0) {
                return;
            }
            //执行异步上传
            $.ajaxFileUpload({
                url: '@Url.Action("UploadImg","Home")',//上传到文件服务器请求地址
                type: 'post',
                data: { dir: 'image' },//自定义参数
                secureuri: false,//是否需要安全协议,一般设置为false
                fileElementId: 'imgFile',//文件上传遇的ID
                dataType: 'json',//返回值类型,一般设置为json
                success: function (data)//服务器成功响应处理函数
                {
                    //由于ajaxFileUpload把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了,需要重新绑定一下
                    $("#imgFile").change(function () {
                        uploadFacePhoto();
                    })                   
                    if (data.error == 0) {
                        $("#articleFacePhotoImg").attr("src", data.url);
                    } else {
                        alert(data.message);
                    }
                }

            });
        }
        //绑定文章封面文件域改变事件       
        $("#imgFile").change(function () {
            uploadFacePhoto();
        });
        //点击实现上传
        //$("#btnUp").click(function () {
        //    uploadFacePhoto();
        //});
    </script>

View Code