Question

我想让图像像一个按钮，当按下它时，它允许我上传另一个图像。

我现在所拥有的是片段中的部分但是我想让它从我的服务器中拉出一个图像作为按钮，然后运行一些ajax而不必重新加载页面然后显示所选择的图像（上一张图片应该更改为所选的图片。）

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

您只需放置一个图像（将其源设置为图像源）并隐藏文件字段。只要有人点击Image触发器，就可以通过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上传的详细文件

如何使图像充当上传文件按钮

3 个答案: