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

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

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

При нажатии этой кнопки я хочу загрузить новый файл. Как я могу это сделать? Вы можете проверить мой код Демо

Ответ 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();
});

Демо:: Обновлен скрипт

Ответ 2

Посмотрите на это

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

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

Ответ 3

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

Ответ 4

вы используете неправильный ввод, вместо этого используйте файл, если вы хотите, чтобы кнопка была похожа на круг в вашей демо-версии кода, вам нужно будет использовать 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

Надеюсь, это поможет:)

Ответ 5

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

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

Как настроить кнопку обзора?

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

Ответ 6

Не нужно, чтобы javascript просто помещал <input> и <img> внутрь <label>, чтобы убедиться, что вы скрываете <input> так:

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

Ответ 7

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

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