用上傳的圖片替換圖片

我在解決圖片上傳問題時遇到了一些問題。我正在使用一個jquery函數來檢查所選圖像的文件類型。我想要做的是將網站頁面上的當前圖像替換爲用戶決定上傳的任何圖像。但是，我無法找到從上傳中獲取完整圖像源路徑的方法 - 我總是會得到一個虛假的路徑，這對我所要做的並不起作用。我是否真的需要爲圖像創建數據庫，如果我想這樣做，還是有其他方法？我無法使用PHP/MySQL代碼 - 只有ASP.NET，C＃和SQL/SQL Express。用上傳的圖片替換圖片

這是我到目前爲止的代碼，除了我無法用上傳的代碼成功替換默認圖像（名稱和標識爲「logo」），因爲我沒有從中獲得完整路徑上傳者。任何建議將是非常有幫助！在此先感謝！

<html> 
    <head> 
     <title>Image Swap Widget Testing</title> 

    <style type="text/css"> 
     .myWebForm{ 
      border: 4px solid grey; 
      width: 300px; 
      height: 200px; 
      padding: 10px; 
      font-family: Arial; 
      font-size: small; 
     } 
    </style> 

     <script type="text/javascript" src="jquery-1.9.1.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('INPUT[type="file"]').change(function() { 
        var ext = this.value.match(/\.(.+)$/)[1]; 
        switch (ext) { 
         case 'jpg': 
         case 'jpeg': 
         case 'png': 
         case 'gif': 
         case 'bmp': 
          $('#uploading').attr('disabled', false); 
          $('#logo').attr("src", $('#uploading').val()); 
          alert('image approved!'); 
          alert($('img').attr('src')); 
          alert($('img')[0].src); 
          alert($('#uploading').val(img.src)); 
         break; 
        default: 
         alert('This is not an allowed file type.'); 
         this.value = ''; 
        } 
       }); 

       $('#addButton').click(function(){ 
        //alert('Add Image Button was clicked'); 

        //var newImgSrc = getSrc($('#uploading').val()); 
        //$('#logo').attr("src", newImgSrc); 
        //alert($('#logo').attr("src")); 
        //alert($('#uploading').val()); 

       }); 
      }); 

    </script> 
    </head> 

    <body> 

    <img src="Lighthouse.jpg" name="logo" alt="logo" id="logo" width="200" /> 

    <br/> 

    <form name="myWebForm" class="myWebForm" action="#" method="post"> 
     <h3>Change Default Logo</h3> 
      <input type="file" name="uploadField" id="uploading" /> 
     <p><b>Allow extensions:</b> .png, .bmp, .jpg, .jepg, .gif<p> 
     <p><b>Dimensions:</b> 50px x 80px<p> 
     <input type="button" name="addButton" id ="addButton" class="addButton" value="+ Add" /> 
     <input type="button" name="cancelButton" id ="cancelButton" class="cancelButton" value="X Cancel" /> 
    </body> 
</html>

來源

2013-03-14 Dejsa Cocan

如果你使用iframe運輸時，它的加載，你可以從IFRAME的路徑。

<script> 
$('#upload-frame').load(function(e) { 
    $('img').attr('src', $(this).contents().find('body').html()); 
}); 
</script> 
<form method="post" action="upload.php" enctype="multipart/form-data" 
     id="upload-form" target="upload-frame"> 
    <input type="file" name="uploadField" id="uploading" /> 
    <input type="submit" value="upload"/> 
</form> 
<iframe id="upload-frame" name="upload-frame"></iframe>

你可以這樣做服務器：

$info = pathinfo(basename($_FILES['image']['name'])); 
$ext = strtolower($info['extension']); 
if (in_array($ext, array('png', 'jpg', 'gif', 'bmp'))) { 
    $path = 'SOME/PATH/filename.' . $ext; 
    if (move_uploaded_file($_FILES['image']['tmp_name'], $path)) { 
     echo $path; 
    } 
}

來源

2013-03-14 15:38:31 jcubic

服務器端代碼看起來像PHP，OP不能使用它。 – 2013-03-14 15:44:33

@MarcelKorpel抱歉，我不知道Asp.Net，但我相信你也可以做同樣的事情。只要搜索'上傳asp.net' – jcubic 2013-03-14 15:46:52

您可以隨時使用FileSystem API。首先，我們輸入：

<input type="file" id="MyImage" />

監聽變化，抓住文件：

document.getElementById('MyImage').onchange = function(e) { 
    // Get the first file in the FileList object 
    var imageFile = this.files[0]; 
    // get a local URL representation of the image blob 
    var url = window.URL.createObjectURL(imageFile); 
    // Now use your newly created URL! 
    someImageTag.src = url; 
}

希望幫助！

來源

2013-03-14 19:45:10

這實際上幫助我解決了這個問題！謝謝！ – 2013-03-15 19:00:31

沒問題！我很高興能夠提供幫助。它實際上是答案嗎？如果是這樣，請將此標記爲已回答，但如果不是，我很高興我可以指引您朝着正確的方向發展:) – 2013-03-18 03:51:43

用上傳的圖片替換圖片

回答

相關問題