Как загрузить новый файл по нажатию кнопки изображения

Question

У меня есть задача загрузить новый файл с кнопки клика по изображению. Мой код

<label>File</lable> 
    <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/> 

На щелчку этой кнопки я хочу, чтобы загрузить новый file.How я могу это сделать? Вы можете проверить свой код от Demo

Answer 1

Вы можете добавить скрытое поле ввода файла, например:

<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/> 
<input type="file" id="my_file" style="display: none;" /> 

И сделать:

$("input[type='image']").click(function() { 
    $("input[id='my_file']").click(); 
}); 

Demo :: Updated Fiddle

Answer 2

You может сделать это с помощью css.

Пожалуйста, проверьте 4-й ответ в этом блоге.

How can I customize the browse button?

Вы можете использовать изображение в качестве фонового изображения класса .button.

Answer 3

посмотрите на эту

http://css-tricks.com/ajax-image-uploading/

его использование AJAX .....

Answer 4

Если вы ищете решение, совместимое кроссбраузерной вы должны проверить plupload (http://www.plupload.com) его поддерживает кнопки изображения, а также то, что я помню.

Answer 5

Вы используете неправильный ввод, вместо этого используйте файл, если вы хотите, чтобы кнопка была похожа на круг в вашей демо-версии кода, вам нужно будет использовать CSS, чтобы изменить способ «отправить». Это должно быть в форме:

<form action="upload_file.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="myfile"/> 
    <input type="submit" class="circle-btn"/> 
<form> 

Я не знаю, на каком языке вы используете в стороне сервера (PHP, ASP.NET и т.д.), но вам нужно будет создать страницу (для Xample «upload_file.php» для php). Вы можете легко найти примеры в Google о том, как создать страницу, как это, просто скопируйте pasete кода:

Примера в PHP: http://www.w3schools.com/php/php_file_upload.asp

Надеется, что это помогает :)

Answer 6

Дополнение для ответа DemoUser, в add .focus() работает для меня.

$("input[type='image']").click(function() { 
    $("input[id='my_file']").focus().click(); 
    }); 

Answer 7

Там нет необходимости в JavaScript просто положить <input> и <img> внутри <label> убедитесь, что вы скрыть <input> как так:

<label for="image"> 
     <input type="file" name="image" id="image" style="display:none;"/> 
     <img src="IMAGE URL"/> 
    </label>