0

我正在创建一个响应式移动网站，我希望能够从设备上拍摄并上传照片。我已经让这部分工作使用

<form method="post" action="takephoto.php" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
</form>

现在，我遇到的问题是，在我选择了我想要使用的图片之后，我不知道如何在我的代码中引用它。我需要这样做的原因是我正在使用一个 .js 库，它允许我上传 ISBN 条形码的图片，并且 .js 文件将读取该文件并将 ISBN 作为文本输出，稍后我会做更多的事情。（也许将其链接到 Google Books API）

这是我从以下位置获取条形码扫描仪 .js 的地方：http: //badassjs.com/post/654334959/barcode-scanning-in-javascript

我对所有这些都比较陌生，感谢您的帮助。

4

2 回答 2

0

由于您使用的 JavaScript 库正在解析页面上的图像，因此您必须在上传后将图像显示在页面上。

所以基本上你需要4个步骤来实现这一点：

  1. 显示上传表格（这是您在问题中所做的）；
  2. 抓取步骤 1 中上传的图像并将其保存到可访问的位置
  3. 在屏幕上显示图像
  4. 调用 get_barcode_from_image.js 来解析它

这是一段代码供参考。它包含上述所有 4 个步骤。

<?php
// step 2: save the image
if ($_FILES['myfile']['error'] == 0) {
    move_uploaded_file($_FILES['myfile']['tmp_name'], 'u/barcode.jpg');
?>
<!-- step 3: show the image -->
<img src="u/barcode.jpg" id="barcode">
<script src="get_barcode_from_image.js"></script>
<div id="result"></div>
<!-- step 4: parse the barcode -->
<button onclick='document.getElementById("result").innerHTML = getBarcodeFromImage("barcode")'>scan</button>
<?php
}
?>
<!-- step 1: show the upload form -->
<form method="post" action="barcode.php" enctype="multipart/form-data">
<input type="hidden" name='a' value='b'/>
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
<input type="submit" value="submit" />
</form>

当然你可以使用ajax 左右来获得更好的用户体验，但过程不会改变。

于 2013-08-01T06:28:36.813 回答
0

您将不得不使用ajax。此链接包含一些对您有用的信息。

使用 ajax 上传图片并在响应中返回url或“失败”。然后你可以在你的js代码中使用，

if(response=="failed"){
    //Handle upload failed
}
else {
    //Handle url. Here response is your url actually.
              // So to append the image to a given id, you would use,
    $("#append_to_id").append("<img src='"+response+"'>");
}
于 2013-08-01T05:44:37.587 回答