如何使圖像充當上傳文件按鈕

Question

我想打一個形象的行爲像一個按鈕按下時它可以讓我上傳其他圖片。

我現在所擁有的是片段中的部分，但我想讓它從我的服務器上拉出一個圖像作爲按鈕，然後運行一些ajax而不必重新加載頁面，然後顯示選擇（以前的圖像應該改變爲選擇的圖像）。

.Uploadbtn { 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding: 10px 20px; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    background: #000066; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -ms-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    border-radius: 4px; 
 
    width: 100px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.Uploadbtn .input-upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    opacity: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div class="Uploadbtn"> 
 
    <input type="file" class="input-upload" /> 
 
    <span>IMAGE</span> 
 
</div>

Answer 1

<input type="image" src="image.jpg" /> 

這是一個HTML形式代替按鈕的使用圖像的標準方式。

Answer 2

HTML：

<div class='image-upload-btn'></div> 

CSS：

.image-upload-btn{ 
    background-image: url('path/to/default.jpg'); 
    background-position: center; 
    background-size: cover; 
    //other properties... 
} 

的Javascript：

$('.image-upload-btn').on('click', function(){ 
    var input = document.createElement('INPUT'); 
    input.type = 'file'; 
    $('html body').append(input); 
    input.click(); 
}) 

//after you uploaded new image, you should get an url point to that image, 
//and change the background-image with the new image url 
$('.image-upload-btn').css('background-image', 'url(' + newImageUrl + ')'); 

Answer 3

你只是需要把一個圖像（設置它的源圖像源）和隱藏文件字段。 只要有人點擊圖片觸發器，點擊javascript隱藏的file_field。

然後寫時調用的是，file_field值的變化的JavaScript方法。 此方法將文件上傳到服務器，並取回成功消息以及新上傳的圖像url。將圖像源設置爲從服務器接收的新上傳的圖像。

<style> 
.file_field{ 
display: none; 
} 
</style> 

<div class="Uploadbtn"> 
    <input type="file" class="file_field" /> 
    <img src="/my_awesome_image.jpg" class='image-field'> 
</div> 

    <script type="text/javascript"> 
    $('.image-field').click(function(){ 
    $('.file_field').trigger('click'); 
}) 
$('.file_field').change(function(e){ 
    var files=e.target.files; 
    uploadFiles(files,e)}); 
</script> 
function uploadFiles(files,event) 
{ 
    event.stopPropagation(); // Stop stuff happening 
    event.preventDefault(); // Totally stop stuff happening 

    // START A LOADING SPINNER HERE 

    // Create a formdata object and add the files 
    var data = new FormData(); 
    $.each(files, function(key, value) 
    { 
     data.append(key, value); 
    }); 

    $.ajax({ 
     url: 'submit_image_url?files', 
     type: 'POST', 
     data: data, 
     cache: false, 
     dataType: 'json', 
     processData: false, // Don't process the files 
     contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
     success: function(data, textStatus, jqXHR) 
     { 
      if(typeof data.error === 'undefined') 
      { 
       // Success so call function to process the form 
       $('.image_field').attr("src",data.new_source); #Set the newly source returned from server here. It is expecting the server will return the source url in 'new_source' key 
      } 
      else 
      { 
       // Handle errors here 
       console.log('ERRORS: ' + data.error); 
      } 
     }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 
      // Handle errors here 
      console.log('ERRORS: ' + textStatus); 
      // STOP LOADING SPINNER 
     } 
    }); 
} 

關注This後進行詳細的文件上傳通過Ajax