上傳圖片到服務器從JavaScript

Question

我使用下面的代碼來查看使用JavaScript上傳的文件。它顯示假路徑，所以我無法將文件上傳到服務器路徑。請幫我將圖像上傳到server.mappath文件夾。

<input type='file' name='file' id='file' value='Choose Photo' accept='image/png,image/jpeg' onchange='handleFileSelect(this);' /> 

<script type="text/javascript"> 
function handleFileSelect(input) { 
    try { 

     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       document.getElementById('hf_image').value = e.target.result 
       $('#preview').attr('src', document.getElementById('hf_image').value); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 

    } 
    catch (ex) { 
     alert('Image Preview : ' + ex.Message); 
    } 
} 

</script> 

Answer 1

var attachments={}; 
function imageSelected(myFiles){ 
for (var i = 0, f; f = myFiles[i]; i++) { 
    var imageReader = new FileReader(); 
    imageReader.onload = (function(aFile){ 
     return function(e){ 
      var tempFileData=e.target.result; 
      attachments[aFile.name]={}; 
      attachments[aFile.name]["content_type"]=tempFileData.split(",")[0].split(":")[1].split(";")[0]; 
      attachments[aFile.name]["data"]=tempFileData.split(",")[1]; 

     }; 
    })(f); 
    imageReader.readAsDataURL(f); 
} 

}

<input type='file' onchange="imageSelected(this.files)"> 

上面的代碼可能有助於您 附件JSON保存文件的詳細信息

Answer 2

爲什麼你不使用AjaxFileUploader，易於使用

按照這個步驟來接近你的目標，

第1步：

dRAG jquery文件頭標記。

這個代碼添加到JavaScript文件，並把它拖到你的頁面的頭部。

jQuery.extend({ 
createUploadIframe: function (id, uri) { 
    //create frame 
    var frameId = 'jUploadFrame' + id; 
    var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; 
    if (window.ActiveXObject) { 
     if (typeof uri == 'boolean') { 
      iframeHtml += ' src="' + 'javascript:false' + '"'; 

     } 
     else if (typeof uri == 'string') { 
      iframeHtml += ' src="' + uri + '"'; 

     } 
    } 
    iframeHtml += ' />'; 
    jQuery(iframeHtml).appendTo(document.body); 

    return jQuery('#' + frameId).get(0); 
}, 
createUploadForm: function (id, fileElementId, data) { 
    //create form 
    var formId = 'jUploadForm' + id; 
    var fileId = 'jUploadFile' + id; 
    var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 
    if (data) { 
     for (var i in data) { 
      jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); 
     } 
    } 
    var oldElement = jQuery('#' + fileElementId); 
    var newElement = jQuery(oldElement).clone(); 
    jQuery(oldElement).attr('id', fileId); 
    jQuery(oldElement).before(newElement); 
    jQuery(oldElement).appendTo(form); 



    //set attributes 
    jQuery(form).css('position', 'absolute'); 
    jQuery(form).css('top', '-1200px'); 
    jQuery(form).css('left', '-1200px'); 
    jQuery(form).appendTo('body'); 
    return form; 
}, 

ajaxFileUpload: function (s) { 
    // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout   
    s = jQuery.extend({}, jQuery.ajaxSettings, s); 
    var id = new Date().getTime() 
    var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); 
    var io = jQuery.createUploadIframe(id, s.secureuri); 
    var frameId = 'jUploadFrame' + id; 
    var formId = 'jUploadForm' + id; 
    // Watch for a new set of requests 
    if (s.global && !jQuery.active++) { 
     jQuery.event.trigger("ajaxStart"); 
    } 
    var requestDone = false; 
    // Create the request object 
    var xml = {} 
    if (s.global) 
     jQuery.event.trigger("ajaxSend", [xml, s]); 
    // Wait for a response to come back 
    var uploadCallback = function (isTimeout) { 
     var io = document.getElementById(frameId); 
     try { 
      if (io.contentWindow) { 
       xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null; 
       xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document; 

      } else if (io.contentDocument) { 
       xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null; 
       xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document; 
      } 
     } catch (e) { 
      jQuery.handleError(s, xml, null, e); 
     } 
     if (xml || isTimeout == "timeout") { 
      requestDone = true; 
      var status; 
      try { 
       status = isTimeout != "timeout" ? "success" : "error"; 
       // Make sure that the request was successful or notmodified 
       if (status != "error") { 
        // process the data (runs the xml through httpData regardless of callback) 
        var data = jQuery.uploadHttpData(xml, s.dataType); 
        // If a local callback was specified, fire it and pass it the data 
        if (s.success) 
         s.success(data, status); 

        // Fire the global callback 
        if (s.global) 
         jQuery.event.trigger("ajaxSuccess", [xml, s]); 
       } else 
        jQuery.handleError(s, xml, status); 
      } catch (e) { 
       status = "error"; 
       jQuery.handleError(s, xml, status, e); 
      } 

      // The request was completed 
      if (s.global) 
       jQuery.event.trigger("ajaxComplete", [xml, s]); 

      // Handle the global AJAX counter 
      if (s.global && ! --jQuery.active) 
       jQuery.event.trigger("ajaxStop"); 

      // Process result 
      if (s.complete) 
       s.complete(xml, status); 

      jQuery(io).unbind() 

      setTimeout(function() { 
       try { 
        jQuery(io).remove(); 
        jQuery(form).remove(); 

       } catch (e) { 
        jQuery.handleError(s, xml, null, e); 
       } 

      }, 100) 

      xml = null 

     } 
    } 
    // Timeout checker 
    if (s.timeout > 0) { 
     setTimeout(function() { 
      // Check to see if the request is still happening 
      if (!requestDone) uploadCallback("timeout"); 
     }, s.timeout); 
    } 
    try { 

     var form = jQuery('#' + formId); 
     jQuery(form).attr('action', s.url); 
     jQuery(form).attr('method', 'POST'); 
     jQuery(form).attr('target', frameId); 
     if (form.encoding) { 
      jQuery(form).attr('encoding', 'multipart/form-data'); 
     } 
     else { 
      jQuery(form).attr('enctype', 'multipart/form-data'); 
     } 
     jQuery(form).submit(); 

    } catch (e) { 
     jQuery.handleError(s, xml, null, e); 
    } 

    jQuery('#' + frameId).load(uploadCallback); 
    return { abort: function() { } }; 

}, 

uploadHttpData: function (r, type) { 
    var data = !type; 
    data = type == "xml" || data ? r.responseXML : r.responseText; 
    // If the type is "script", eval it in global context 
    if (type == "script") 
     jQuery.globalEval(data); 
    // Get the JavaScript object, if JSON is used. 
    if (type == "json") 
     eval("data = " + data); 
    // evaluate scripts within html 
    if (type == "html") 
     jQuery("<div>").html(data).evalScripts(); 

    return data; 
} 

}）

是這樣的：

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="Scripts/fileUploader.js" type="text/javascript"></script> 

第2步： 添加此標記到正文頁面。

<input id="fileToUpload" type="file" size="45" name="fileToUpload" /> 
<button id="btnUploadNewLicense" onclick="return ajaxFileUpload('New');"> 
    Upload</button><br /> 
<div id="loading" style="display: none;"> 
    Please wait...</div> 

第3步： 添加名爲「FileUpload.ashx」到你的項目根目錄的通用處理程序文件， 添加此下面的代碼「FileUplod.ashx」

public void ProcessRequest(HttpContext context) 
    { 
     HttpRequest request = context.Request; 
     HttpResponse response = context.Response; 
     string action = request["Action"]; 
     switch (action) 
     { 
      case "New": 
       string result = "failed"; 
       try 
       { 
        string fileName = SaveCaper(context); 
        result = "successed"; 
        response.Write("{\"result\":" + result.ToString().ToLower() + "}"); 
       } 
       catch 
       { 
        response.Write("{\"result\":" + result.ToString().ToLower() + "}"); 
       } 
       break; 
      default: 
       throw new Exception("Invalid sort column name!."); 
     } 
    } 
    private string SaveCaper(HttpContext context) 
    { 
     string fileName = string.Empty; 
     string path = context.Server.MapPath("~/NewImages"); 
     if (!Directory.Exists(path)) 
      Directory.CreateDirectory(path); 
     try 
     { 
      var file = context.Request.Files[0]; 
      if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE") 
      { 
       string[] files = file.FileName.Split(new char[] { '\\' }); 
       fileName = files[files.Length - 1]; 
      } 
      else 
      { 
       fileName = file.FileName; 
      } 
      string strFileName = fileName; 
      fileName = Path.Combine(path, fileName); 
      try 
      { 
       file.SaveAs(fileName); 
      } 
      catch (Exception exp) 
      { 
       //log the exception 
      } 
     } 
     catch (Exception exp) 
     { 
      //log the exception 
     } 
     return fileName; 
    } 
    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 

還需要在後面的處理程序代碼的頂部添加System.IO。

第4步： 添加這個腳本到你的頭上你的JS文件原型

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
    function ajaxFileUpload(mode) { 
     var fupl = 'fileToUpload'; 
     var fileName = $('#fileToUpload').val(); 
     if (fileName == "" || fileName == null)//if user doesn't select an image 
     { 
      $("#loading").html(""); 
      $("#loading").append("<br/><b>Please select an image...</b>"); 
     } 
     else { 
      var vars = fileName.split("."); //get file extension. 
      if (vars[1].toString().toLowerCase() != "jpg") {//check the file extension. 
       $("#loading").html(""); 
       $("#loading").append("<br/>The image format is not valid !."); 
       return false; 
      } 
      $("#loading").ajaxStart(function() { $('#dialogUpdateLicense :input').attr('disabled', true); $(this).show(); }) 
     .ajaxComplete(function() { $('#dialogUpdateLicense :input').removeAttr('disabled'); }); 
      $("#loading").html(""); 
      $("#loading").append("<br/><b>Please wait...</b>"); 
      $.ajaxFileUpload 
     ({ 
      url: 'FileHandler.ashx', 
      secureuri: false, 
      fileElementId: 'fileToUpload', 
      dataType: 'json', 
      data: { Action: mode }, 
      success: function (data) { 
       if (data.result == "successed") 
        $("#loading").html("The image uploaded successfully!."); 
      }, 
      error: function (data, e) { 
       $("#loading").html("An error occured!."); 
      } 
     }) 
     } 
     return false; 
    } 
</script> 

所有的事情進行了測試，工作正常，我

我希望它會幫助你後。