Проблема с форматом отображения HTML?

#javascript #html #jquery-mobile

#javascript #HTML #jquery-мобильный

Вопрос:

В моем приложении мне нужно выбрать изображение. Поэтому я использую входной тег типа «file». Пользовательский интерфейс выглядит следующим образом,

 <input type="file" id="fileUploader">

введите описание изображения здесь

Как я могу записать приведенный выше входной тег в качестве <a> тега, чтобы при нажатии на изображение с камеры мне нужно было выбрать файл,

 <a href="#" onClick='#'><img src="img/camera.jpg"/></a>

Ответ №1:

Попробуйте, как показано ниже, изменить средство выбора файлов по умолчанию с помощью jquery mobile

HTML похож:

 <span class="ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all fileinput-button">
<span>Pick File </span>
<input type="file" name="files" multiple data-role="none"/>
</span>

css похож:

 .fileinput-button {
      position: relative;
      overflow: hidden;
      float: left;
      margin-right: 4px;
    }
.fileinput-button input {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      opacity: 0;
      filter: alpha(opacity=0);
      transform: translate(-300px, 0) scale(4);
      font-size: 23px;
      direction: ltr;
      cursor: pointer;
    }

ДЕМОНСТРАЦИЯ СКРИПКИ

Ответ №2:

Попробуйте это:

     $(function(){ 
     $('#anchorlink').click(function(){
    $(this).replaceWith('<input type="file" id="fileUploader" />'); 
$('#fileUploader').click(); 
    })
    });




<a href="#" id="anchorlink" >click<img src="stylish.png"/></a>

http://jsfiddle.net/dQHh5/3/

1. Мне не нужен метод show / Hide. Мне нужно щелкнуть изображение, мне нужно выбрать файл, не нужно снова нажимать кнопку просмотра

2. используйте $(‘#FileUploader’).click(); с выбранным этим автофайлом.

Ответ №3:

Лучшим вариантом, чем a было бы использовать label with for , и сохранить input скрытый.

Демонстрация: http://jsfiddle.net/abhitalks/GpsAJ /

Разметка:

 <label for="fileUploader" />
<input type="file" id="fileUploader" />

CSS:

 #fileUploader {
    display: none;
}
label[for=fileUploader] {
    display: inline-block;
    width: 128px; height: 128px;
    cursor: pointer;
    background: url('your-camera-image-here') no-repeat left center;
}

Ответ №4:

Я думаю, это то, что вам нужно

 <img onclick="javascript:document.getElementById('myFile').click();" src="http://www.clker.com/cliparts/O/r/K/T/t/n/camera-icon-hi.png" style="width:50px;height:auto" />

<input type="file" id="myFile" style="display:none" />

Я просто скрываю свой входной файл и позволяю onclick атрибуту изображения отображать диалоговое окно..

Просто обратитесь к моему образцу ниже.

http://jsfiddle.net/fbB46/