如何使用ajax顯示上傳的圖像？

-1

我需要上傳圖片並顯示該圖片，而不用重新加載頁面我如何實現這一點。我想我們可以使用Ajax表單提交來做到這一點。我嘗試了下面的代碼，但Ajax表單提交功能不起作用。有沒有在此代碼的任何錯誤，告訴我如何實現這一如何使用ajax顯示上傳的圖像？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
     <script src="http://malsup.github.com/jquery.form.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       $('#myForm').ajaxForm(function() 
       { 
        alert("Thank you for your comment!"); 
       }); 

      }); 
    </script> 

    <body> 
     <form id="myForm" action="" method="post"> 
      <input type="file" name="image_name" id="image_name" > 
     </form> 
    </body>

謝謝:-)

來源

2014-02-06 Athi

你正在做錯誤的文件沒有張貼在通過AJAX的形式,,你需要將它張貼在正常形式 –

使用jQuery的uploadify，你將能夠完成您的需要， –

我可以在html 4中實現jquery uploadify嗎？ – Athi

由於您使用的是jQuery的形式插件，你就可以發送圖像。你的代碼是正確的，但有一些小錯誤。

您必須調用ajaxForm的提交方法才能進行ajax調用，並且需要將回調添加到AjaxForm的完整事件中（這裏，我添加了onchange事件，所以只有當用戶選擇圖像，然後在Ajax調用將被解僱）

這工作 -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //Added an onchange event. 
    $("#image_name").on('change',function(){ 
     $("#myForm").ajaxForm(
      {complete: function(data){ 
          alert("Thank you for your comment!"); 
         } 
      } 
     ).submit(); 
    }); 
}); 
</script> 

<body> 
    <form id="myForm" action="a.php" method="post"> 
     <input type="file" name="image_name" id="image_name" > 
    </form> 
</body>

來源

2014-02-06 06:09:12 Kamehameha

我用它來使用uploadify用ajax

$(document).ready(function() { 
    var f = $('form'); 
    var l = $('#loader'); // loder.gif image 
    var b = $('#button'); // upload button 
    var p = $('#preview'); // preview area 

    b.click(function(){ 
     // implement with ajaxForm Plugin 
     f.ajaxForm({ 
      beforeSend: function(){ 
       l.show(); 
       b.attr('disabled', 'disabled'); 
       p.fadeOut(); 
      }, 
      success: function(e){ 
       l.hide(); 
       f.resetForm(); 
       b.removeAttr('disabled'); 
       p.html(e).fadeIn(); 
      }, 
      error: function(e){ 
       b.removeAttr('disabled'); 
       p.html(e).fadeIn(); 
      } 
     }); 
    }); 
});

來源

2014-02-06 05:38:38

上傳圖片做些事情是這樣插件，我這樣做通過ajax上傳圖片，文件上傳後uploadAllComlete函數設置圖片tage src到文件通過上傳存儲在服務器上的URL，你完成：

<input type="file" name="fileUpload" value="" id="fileInput1" /> 
       <p><a href="javascript:$('#fileInput1').uploadifyUpload();">Upload Files</a></p>

這裏是JavaScript函數：

<script type="text/javascript"> 


    $("#fileInput1").uploadify({ 
     'uploader': '@Url.Content("~/Scripts/jquery.uploadify-v2.1.4/uploadify.swf")', 
     'script': '@Url.Content("~/Resource/Upload")', 
     'auto': false, 
     'multi': false, 
     'expressInstall': '@Url.Content("~/Scripts/jquery.uploadify-v2.1.4/expressInstall.swf")', 
     'cancelImg': '@Url.Content("~/Scripts/jquery.uploadify-v2.1.4/cancel.png")', 
     'scriptAccess': 'always', 
     'hideButton': false, 
     'fileTypeDesc': 'Image Files', 
     'fileTypeExts': ' *.jpg; *.png', 
     'fileDataName': 'uploadedFile', 
     'sizeLimit': 1000000000, 
     'onError': function (event, ID, fileObj, errorObj) { 
      $('#UploadedPicture').val(''); 
      $('#uploadedImage').attr('src', ''); 
      $('#uploadedImage').hide(); 
      //alert("name: " + fileObj.name + " error type: " + errorObj.type + ", info: " + errorObj.info); 
     }, 
     'onAllComplete': function (event, data) { 
      //alert("allcomplete => " + data.filesUploaded + ":" + data.errors + ":" + data.allBytesLoaded + ":" + data.speed); 
     }, 
     'onCheck': function() { 
      //alert("oncheck"); 
     }, 
     'onComplete': function (event, id, fileObj, response, data) { 

      //alert("oncomplete => " + ":" + fileObj.name + ":" + fileObj.filePath + ":" + fileObj.size + ":" + response); 
      $('#fileInput2').val(fileObj.name); 
      $('#uploadedImage').attr('src', '/uploads/' + fileObj.name); 


     }, 
     'onOpen': function (event, id, fileObj) { 
      //alert("onopen => " + ":" + fileObj.name + ":" + fileObj.filePath + ":" + fileObj.size); 
      var temp = fileObj.name.split('('); 
      var filename = $.trim(temp[0]); 
      $('#UploadedPicture').val('~/uploads/' + filename); 
      $('#uploadedImage').attr('src', '/uploads/' + filename); 
      $('#uploadedImage').show(); 
     }, 
     'onProgress': function (event, id, fileObj, data) { 
      //alert("onprogress => " + ":" + fileObj.name + ":" + fileObj.filePath + ":" + fileObj.size + ":" + data.percentage + ":" + data.bytesLoaded + ":" + data.allBytesLoaded + ":" + data.speed); 
     }, 
     'onUploadSuccess': function (file, data, response) { alert('test'); $('#fileInput2').val(file.name); }, 
     'onUploadComplete': function (file) { 
      //alert('The file ' + file.name + ' finished processing.'); 
     }, 
     'onCancel': function (file) { 
      $('#UploadedPicture').val(''); 
      $('#uploadedImage').attr('src', ''); 
      $('#uploadedImage').hide(); 
     } 
    }); 

    </script>

這裏是哪個文件張貼了我的服務器端功能：

public ActionResult Upload(HttpPostedFileBase uploadedFile) 
     { 
      if (uploadedFile.ContentLength == 0) return new EmptyResult(); 

      string[] temp = uploadedFile.FileName.Split('('); 
      string FileName = temp[0].Trim(); 
      string savedFileName = Path.Combine(HttpContext.Server.MapPath("~/Uploads"), uploadedFile.FileName); 
      uploadedFile.SaveAs(savedFileName); 

      return new EmptyResult(); 
     }

來源

2014-02-06 05:38:50

我需要使用ajax – Athi

這個插件將通過ajax上傳圖片或文件，您的頁面狀態將被保存，並且不會回傳 –

如何使用ajax顯示上傳的圖像？

回答

相關問題