图片上传的几种常用方法

---恢复内容开始---

FineUploader上传组件上传图片

MVC+Ajax+FineUploader

使用方法

引用js文件

<link href="@Url.Content("~/Scripts/jquery.upload/fineuploader-3.4.1.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.upload/jquery.fineuploader-3.4.1.min.js")" type="text/javascript"></script>

 MVC前端

 

<div id="uploadImage">
                    <a href="javascript:;"><img src="@Url.Content("~/Areas/SNS/Themes/Default/Content/images/postpic.jpg")" alt="" /></a>
                    <a href="javascript:;"  style="color:#a9a9a9;">缩略图</a>                   
                </div>
                   @*图片窗口*@
                <div class="yulan" id="previewImg" style="display: none;right:25px;">
                    <div class="yulan_a"></div>
                    <div class="yulan_b">
                     
                        <h1 id="previewImgTitle">预览图</h1>
                        <div class="yulan_b_s">
                        @*预览图存储URL*@
                            <img id="previewImgURL" style="width: 175px" src="@Model.PicURL" alt="" />
                            <input id="previewImgHide" type="hidden" value="" />
                        </div>
                        <div class="yulan_b_y">
                        @*图片删除*@
                            <p class="yulan_b_y1"><a href="javascript:void(0)" id="delpreview">删除</a></p>
                        </div>
                    </div>
                </div>

js代码

$(function () {
    //显示对话框
    $("#EidtContent").click(function () {
        $("#EditdialogDiv").show();
        $(".tanchu_bg").show();
    });
    //关闭对话框
    $("#closeDialogEdit").click(function () {
        $("#EditdialogDiv").hide();
        $(".tanchu_bg").hide();
    });
    var ImageUrlEdit = "";
    //点击上传
    $("#uploadImage").click(function (e) {
        Upload("#uploadImage");
    });
    //点击删除上传的图片
    $("#delpreview").click(DelImage);
    function Upload(control) {
        //上传成功按钮
        $(".btn-success").find("input").css("height", "28px");

        var multiple = true;
        var uploadbutton = "修改游记缩略图";
        var templatehtml;
        multiple = false;
        //上传图片按钮捕捉
        //        uploadbutton = $("#SxUploadImage").html();
        //模板
        templatehtml = '<div class="qq-uploader span12">' +
            '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
            '<div class="qq-upload-button btn btn-success" style="width: auto;padding-top: 0px;background:#f7f7f7; color:black;">{uploadButtonText}</div>' +
            '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
            '<ul class="qq-upload-list" style="margin-top: 0px; text-align: center; "></ul>' +
            '</div>';

        var uploader = new qq.FineUploader({
            element: $(control)[0],
            //处理程序路径
            request: {
                endpoint: '/fx/Upload/SNSUploadTmpImg.aspx'
            },
            //提示文字
            text: {
                uploadButton: uploadbutton,
                waitingForResponse: "\r处理中", dragZone: "上传", dropProcessing: "正在上传，请稍候..."
            },
            template: templatehtml,
            multiple: multiple,
            //图片格式的验证
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
                // sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
            },
            callbacks: {
                onComplete: function (id, fileName, responseJSON) {

                    $(".qq-upload-list").hide();
                    $(".btn-success").css("overflow", "");
                    $(".btn-success").find("input").css("height", "28px").css("width", "50px").css("font-size", "12px");
                    if (responseJSON.success) {
                        SxImageUrl = responseJSON.data;
                        //预览图
                        $("#previewImgURL").attr("src", responseJSON.data.format("T116x170_"));
                        $("#previewImgHide").val(SxImageUrl);
                        $("#previewImg").fadeIn(300);
                        resizeImg('#previewImg', 211, 1280);
                    }
                    else {
                        ShowFailTip("服务器没有返回数据，可能服务器忙，请稍候再试：");
                    }
                }
            }
        });
    }
    function DelImage() {
        $.ajax({
            //修改路径
            url: "/fx" + $Maticsoft.BasePath + "profile/AjaxDelYulanTu",
            type: 'post', dataType: 'text', timeout: 10000,
            data: { ImageUrl: SxImageUrl },
            success: function (resultData) {
                if (resultData == "No") {
                    $.jBox.tip("操作失败...", 'error');
                }
                else {
                    SxImageUrl = "";
                    $("#previewImg").fadeOut(300);
                    $("#previewImgURL").attr("src", "");
                    $("#previewImgHide").text("");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                ShowFailTip("操作失败：" + errorThrown);
            }
        });
    }

WebConfig 配置

<system.webServer>
<handlers>
 <add name="SNSUploadTmpImg" verb="*" path="/Upload/SNSUploadTmpImg.aspx" type="Maticsoft.Web.Handlers.SNS.UploadImageHandler" />
 </handlers>
 </system.webServer>

后台

文件处理程序：略