Question

我有多个表单的网络应用程序，每个表单收集不同的信息。一旦打开弹出式bootstrap模态窗口并上传图像，提交后通过Ajax调用上传后图像上传并将图像名称复制到另一个表单输入区域。

这完全适用于桌面浏览器，但它无法在手机浏览器中使用。

当我通过相机选择图像时，它会提交并重定向页面。

注意： 我需要的是：如果我通过相机选择图像并选择它，那么它不应该重定向或自动提交它应该像桌面网络浏览器一样工作。

选择图片形式

<tr><td>PHOTO</td><td><input type='text' class='upload' id='photo' readonly='readonly' /><button id='upImage' class='upImage' data-toggle='modal' data-target='#image_upload' data-backdrop='static' data-keyboard='false'>Click me</button>*Max 1MB, JPG / PNG</td></tr>

POPUP图片上传表单

<div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
        <form id="uploadForm" method="post" >

<div class="upitem2">
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" accept='image/png, image/jpeg, image/gif'/>
</div>
<div class="upitem3">
<input type="submit" value="Submit"  class="btn btn-default" />
</div>
</form>
      </div>
  <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
      </div>
    </div>

  </div>

AJAX表单提交并将值设置回主表单

<script type="text/javascript">
$(document).ready(function (e) {
  $("#uploadForm").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
          url: "fileUpload.php",
      type: "POST",
      data:  new FormData(this),
      contentType: false,
          cache: false,
      processData:false,
       async: false,
      success: function(data)
        {

          data = data;
      //$("#targetLayer").html(data);
      //$("#targetLayer").attr("src", data);
      $("#photo").val(data);
      //console.log(data);
        },
error: function(jqXHR, textStatus, errorThrown) {

alert( console.log(jqXHR) + console.log(textStatus) +  console.log(errorThrown));
        //alert('An error occurred... Please Contact to Admin');
  //alert('Please upload Below 1MB Image and it');
            }
     });
  }));
});
</script>

注意： 还有另一种形式与此无关，但只转换所有数据并保存到数据库。

移动设备是否有任何特殊功能可以像普通桌面一样在代码上工作？

如何在移动设备中通过相机处理图像上传/捕获图像

0 个答案: