AJAX - 僅使用圖標上傳圖片（Facebook風格）

我正嘗試創建圖片上傳系統，您只需按圖標> Windows資源管理器打開>選擇圖片>選擇後，上傳過程開始立即自動地。但是，每次我嘗試通過AJAX運行代碼時，我都會收到undefined index notice，可以使用「開發人員工具」選項卡查看該代碼。我的PHP沒什麼問題，所以我不會在這裏發佈它，因爲上傳過程在沒有AJAX的情況下工作得很好。AJAX - 僅使用圖標上傳圖片（Facebook風格）

我在想我的AJAX代碼可能有問題。任何幫助將非常感激！ :)

這裏是我的標記[HTML]

<div class="event-head" id="hover-card"> 
     <i class="fa fa-camera" id="upload-event-cover" title="Update your cover"></i> 
     <?php $attributes = ['id' => 'update-cover'];?> 
     <?php echo form_open_multipart('events/upload_cover_photo', $attributes);?> 
      <input type='hidden' name='event_id' value='<?=$event['event_id']?>'/> 
      <input type="file" id="event-cover-file" name="userfile" /> 
     <?php echo form_close();?> 
</div>

這裏的AJAX部分[JS]

<script type="text/javascript"> 
// Animate the camera icon everytime user hover's over #hover-card 
$("#hover-card").on({ 
    mouseenter: function() { 
     $("#upload-event-cover").animate({ 
      opacity: 1 
     }, { 
      duration: 100, 
     }); 
    }, 
    mouseleave: function() { 
     $("#upload-event-cover").animate({ 
      opacity: 0 
     }, { 
      duration: 100, 
     }); 
    } 
}); 

// Open "Browse" 
$('#upload-event-cover').click(function(e) { 
     e.preventDefault(); 
     $('#event-cover-file').click(); 
}); 


    $("#event-cover-file").change(function(e) { 

    if($(this).val() != "") { 

     // Send it via AJAX 
     $("form#update-cover").submit(function(e) { 
       var from = $(this); 

       $.ajax({ 
        url: from.attr('action'), 
        type: from.attr('method'), 
        data: { userfile: $('#event-cover-file').val() }, 
        beforeSend: function() { 
         from.find(".comment_submit").hide(); 
         from.find("#spinner_comment").show(); 
        }, 
        success: function(data) { 
         if(data.st == 1) { 
          $("#event-cover-file").html(data); 
         } 

        }, complete: function() { 
         from.find("#spinner_comment").hide(); 
         from.find(".comment_submit").show(); 
        } 
       }); 
       e.preventDefault(); 
      }); 
     } 
    });  
</script>

來源

2014-09-26 Cooper

您使用的是哪個版本的PHP？ '持續時間：100'後刪除'，'。 – PHPglue 2014-09-26 00:22:24

我正在使用PHP 5.5版本，並使用CodeIgniter框架 – Cooper 2014-09-26 00:23:28

'from.find（「。comment_submit」）'構建了我的應用程序。我沒有看到HTML。 – PHPglue 2014-09-26 00:43:44

開始改變：

$("#hover-card").on({ 
    mouseenter: function() { 
     $("#upload-event-cover").animate({ 
     opacity: 1 
     }, { 
      duration: 100, 
     }); 
    }, 
    mouseleave: function() { 
     $("#upload-event-cover").animate({ 
      opacity: 0 
     }, { 
      duration: 100, 
    }); 
    } 
});

到

var uec = $('#upload-event-cover') 
$('#hover-card').mouseenter(function(){ 
    uec.fadeIn(100); 
}).mouseleave(function(){ 
    uec.fadeOut(100); 
});

url: from.attr('action')表示您將JavaScript數據提交到構建HTML的同一PHP頁面。您需要在頁面上使用PHP的適當條件才能使其工作。我建議你使用完全不同的url來提交你的AJAX。您通常會將AJAX發送到url，該或$_POST['json_object_property']處理JSON數據（強制dataType:'JSON'）。在您的PHP頁面（url設置爲）後觸發sucess:function(){}通常將PHP關聯數組編碼爲JSON，如：echo json_encode($assoc_array)。

來源

2014-09-26 00:55:33 PHPglue

是的，做到了。問題是AJAX無法獲取我想要上傳的文件的名稱。如果沒有AJAX，它就可以工作，所以我的代碼有些奇怪的事情發生。 – Cooper 2014-09-26 01:01:40

我檢查了我的開發工具選項卡，用戶文件的路徑如下：userfile：C：\ fakepath \ IMG_0418.JPG.863x516_q85_box-0,225,5184,3324_crop_detail.jpg – Cooper 2014-09-26 01:03:03

當前文件夾中的'events'文件夾是您的PHP頁面，生成HTML，在？ – PHPglue 2014-09-26 01:10:52

AJAX - 僅使用圖標上傳圖片（Facebook風格）

回答

相關問題