Question

我正在创建一个响应式移动网站，我希望能够从设备上拍摄然后上传图片。我已经使用

完成了这部分工作

<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）

这是我从http://badassjs.com/post/654334959/barcode-scanning-in-javascript

获取条形码扫描仪.js的地方

我对这一切都比较新，谢谢你的帮助。

Answer 1

您必须使用ajax。 This link包含一些有用的信息。

使用ajax上传图片并在回复中，返回url或＆＃34;失败＆＃34;。然后你可以在你的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+"'>");
}

Answer 2

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

所以基本上你需要4步才能实现这个目标：

显示上传表单（这是您在问题中所做的）;
抓取在步骤1中上传的图片并将其保存到可访问的位置
在屏幕上显示图像
调用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左右来获得更好的用户体验，但这个过程不会改变。

如何在HTML中引用上传的img src

2 个答案: