Views/Home/Index.cshtml

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@{
    ViewBag.Title = "51asp.net原创图片上传实例 可兼容所有主流浏览器";
}
<link href="~/css/imgUploadCss.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>
<script src="~/js/ajaxfileupload.js"></script>
<input type="file" id="pic1" name="pic1" accept=".jpg,.jpeg,.png,.bmp" multiple="multiple" onchange="picChange('1', 'true')" />

<input type="hidden" value="@ViewBag.Pic1" id="h_pic1" name="h_pic1" />

<div class="right houseImgUpload">
    <div class="imgShow" id="show_Pic1">
        @Html.Raw(ViewBag.PicStr1)
    </div>
</div>

<script type="text/javascript">

    function deleteImg(that, h_id, path) {
        var h_value = $("#h_" + h_id).val();
        if (h_value.indexOf(path + ",") >= 0) {
            $("#h_" + h_id).val(h_value.replace(path + ",", ""));
        }
        else if (h_value.indexOf("," + path) >= 0) {
            $("#h_" + h_id).val(h_value.replace("," + path, ""));
        }
        else if (h_value.indexOf(path) >= 0) {
            $("#h_" + h_id).val(h_value.replace(path, ""));
        }
        $(that).parent().remove();
    }

    //参数1是用于区分不同的图片上传控件 图片2是否多选 多选为true 不是多选为false 上传后的图片路径保存在 h_pic隐藏表单 多个图片用逗号间隔
    function picChange(id, multi) {
        $.ajaxFileUpload({
            url: "/Home/Upload", //用于文件上传的服务器端请求地址
            type: "post",
            secureuri: false, //一般设置为false
            fileElementId: "pic" + id, //文件上传空间的id属性
            dataType: "json", //返回值类型 一般设置为json

            success: function (data, status) { //服务器成功响应处理函数

                for (var i = 0, length = data.listPic.length; i < length; i++) {
                    var p = $("#h_pic" + id).val();
                    if (multi == "true") {
                        if (p == "") {
                            $("#h_pic" + id).val(data.listPic[i].FileName);
                        }
                        else {
                            $("#h_pic" + id).val(p + "," + data.listPic[i].FileName);
                        }
                    }
                    else {
                        $("#h_pic" + id).val(data.listPic[i].FileName);
                    }
                    html = "<i class=\"list\"><img src=\"" + data.listPic[i].FilePath + "\" sname=\"" + data.listPic[i].FileName + "\" /><i onclick=\"deleteImg(this,'pic" + id + "','" + data.listPic[i].FileName + "')\">删除</i></i>";

                    if (multi == "true") {
                        $("#show_Pic" + id).append(html);