2016-02-10 30 views
0

似乎无法让这个工作。我已经从字面上尝试了一切。任何人都可以帮助我。我一直试图弄清楚一段时间,即将放弃这个插件。我得到的错误并不是真的告诉我什么。上传文件夹具有适当的权限。添加了Fine Uploader,无法上传文件

我基本上创建了一个新的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>

+0

下次请包括日志/错误消息和您的相关服务器代码。目前,没有足够的信息供任何人提供帮助。 –

+0

另外,您似乎在“入门指南”中间停下了脚步。下一页谈到服务器。 –

+0

是的,我认为需要有一个asp.net c#非MVC的例子。没有什么是说有一个HttpHandler,这是我终于得到它的工作方式。 –

回答

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; 
     } 
    } 
}