上傳懸浮窗的數據，當我點擊一個按鈕

Question

大家好我是新來的，我是新的jQuery中也 我申請在這篇文章中我的網站一次 using-dropzone-js-file-image-upload-in-asp-net-webform-c

上傳多個數據，同時我「M使用此代碼時，我的懸浮窗區域中單擊它直接上傳照片至~/work/

所以我希望如此，只是點擊後即可使用與id=post 一鍵上傳懸浮窗面積這個圖片就可以了

所以這裏是我的代碼： 這裏是頭：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <link href="css/dropzone.css" rel="stylesheet" type="text/css" /> 
    <script src="js/dropzone.js" type="text/javascript"></script> 

HTML部分：

<div id="dZUpload" class="dropzone "> 
    <div class="dz-default dz-message"></div> 
</div> 

的JavaScript部分：

<script> 
    $(document).ready(function() { 
     Dropzone.autoDiscover = false; 
     //Simple Dropzonejs 
     $("#dZUpload").dropzone({ 
      url: 'FileUploader.ashx', 
      addRemoveLinks: true, 
      maxFiles: 3, 
      success: function (file, response) { 
       var imgName = response; 
       file.previewElement.classList.add("dz-success"); 
       console.log("Successfully uploaded :" + imgName); 
      }, 
      error: function (file, response) { 
       file.previewElement.classList.add("dz-error"); 
      } 
     }); 

    }); 

</script> 

和finnaly通用處理器「

FileUploader.ashx

：

<%@ WebHandler Language="C#" Class="FileUploader" %> 

using System; 
using System.Web; 
using System.IO; 
public class FileUploader : IHttpHandler { 

    public void ProcessRequest(HttpContext context) 
    { 
      context.Response.ContentType = "text/plain"; 

      string dirFullPath = HttpContext.Current.Server.MapPath("~/work/"); 
      string[] files; 
      int numFiles; 
      files = System.IO.Directory.GetFiles(dirFullPath); 
      numFiles = files.Length; 
      numFiles = numFiles + 1; 

      string str_image = ""; 

      foreach (string s in context.Request.Files) 
      { 
       HttpPostedFile file = context.Request.Files[s]; 
       // int fileSizeInBytes = file.ContentLength; 
       string fileName = file.FileName; 
       string fileExtension = file.ContentType; 

       if (!string.IsNullOrEmpty(fileName)) 
       { 
        fileExtension = Path.GetExtension(fileName); 
        str_image = "WorkPhoto_" + numFiles.ToString() + fileExtension; 
        string pathToSave_100 = HttpContext.Current.Server.MapPath("~/work/") + str_image; 
        file.SaveAs(pathToSave_100); 
       } 
      } 
      context.Response.Write(str_image); 
    } 

    public bool IsReusable { 
     get { 
      return false; 
     } 
    } 

} 

Answer 1

在這裏，我認爲這將解決你的問題：

<script> 
$(document).ready(function() { 
    Dropzone.autoDiscover = false; 
    //Simple Dropzonejs 
    var myDropzone = new Dropzone("#dZUpload", { 
     url: 'FileUploader.ashx', autoProcessQueue: false, addRemoveLinks: true, maxFiles: 3, 
     success: function (file, response) { 
      var imgName = response; 
      file.previewElement.classList.add("dz-success"); 
      console.log("Successfully uploaded :" + imgName); 
     }, 
     error: function (file, response) { 
      file.previewElement.classList.add("dz-error"); 
     }, 
    }); 
    $('#button').on('click', function (e) { 
     myDropzone.processQueue(); 
    }); 

});