如何使图像充当上传文件按钮 [关闭]

Question

我想让一张图片像一个按钮一样，当按下它时，我可以上传另一张图片。

我现在拥有的是 sn-p 中的部分，但我想让它从我的服务器中提取图像以充当按钮，然后运行一些 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

您只需放置一个图像（将其源设置为您的图像源）并隐藏文件字段。 每当有人点击图片时，就会触发javascript点击隐藏的file_field。

然后编写一个javascript方法，当File_field值改变时调用。 此方法将文件上传到服务器并返回成功消息以及新上传的图像 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文件上传

Answer 3

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 + ')');