添加了Fine Uploader并且无法上传文件

时间:2016-02-10 19:51:47

标签: fine-uploader

似乎无法让这个工作。我真的尝试了一切。任何人都可以帮助我。我一直试图弄清楚这一段时间,并且即将放弃这个插件。我得到的错误并没有真正告诉我任何事情。 uploads文件夹具有适当的权限。

我基本上创建了一个新的c#Web应用程序并添加了以下内容:http://docs.fineuploader.com/quickstart/02-setting_options.html

请帮助

    <!-- Fine Uploader -->
    <script src="../Scripts/fineuploader/fine-uploader.min.js" type="text/javascript"></script>

    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
                    <button class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
                    <button class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button class="qq-cancel-button-selector">No</button>
                    <button class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button class="qq-cancel-button-selector">Cancel</button>
                    <button class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>

    <script>
        var uploader = new qq.FineUploader(
        {
            debug: true,

            element: document.getElementById('fine-uploader'),

            request: {
                endpoint: '/Uploads'
            },

            deleteFile: {
                enabled: true,
                endpoint: '/Uploads'
            },
            retry: {
                enableAuto: true
            },

            callbacks: {
                onError: function (id, name, errorReason, xhrOrXdr) {
                    alert(qq.format("Error on file number {} - {}.  Reason: {}", id, name, errorReason));
                }
            }

        });
    </script>

1 个答案:

答案 0 :(得分:0)

最后想出来,我添加了一个HttpHandler并将请求端点更改为指向处理程序。

public class ImageUploader : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    { 
        try
        {
            Stream str = context.Request.InputStream;
            BinaryReader br = new BinaryReader(str);
            Byte[] FileContents = { };
            string UploadFile = string.Empty;
            bool IE = false;

            if (context.Request.Browser.Browser == "IE")
            {
                IE = true;
                HttpFileCollection MyFiles = HttpContext.Current.Request.Files;
                HttpPostedFile PostedFile = MyFiles[0];

                if (!PostedFile.FileName.Equals(""))
                {
                    String fn = Path.GetFileName(PostedFile.FileName);
                    br = new BinaryReader(PostedFile.InputStream);
                    UploadFile = fn;
                }
            }

            if (IE)
            {
                HttpContext.Current.Request.Files[0].SaveAs(HttpContext.Current.Server.MapPath("~/uploads/" + UploadFile));
            }
            else
            {
                HttpContext.Current.Request.Files[0].SaveAs(HttpContext.Current.Server.MapPath("~/uploads/" + HttpContext.Current.Request.Files[0].FileName));
            }

            HttpContext.Current.Response.Write("{\"success\":true}");
        }
        catch (Exception Ex)
        {
            HttpContext.Current.Response.Write("{\"error\":}" + Ex.Message);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}