图片上传的几种常用方法

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

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>

后台

文件处理程序：略