Javascript 如何在HTML中引用已上载的img src

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

<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作为文本输出，稍后我将对其进行更多处理。（可能链接到谷歌图书API）

这就是我获取条形码扫描仪.js的来源：

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

你必须使用。包含一些对您有用的信息

使用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+"'>");
}

if（响应==“失败”）{
//句柄上载失败
}
否则{
//处理url。这里的响应实际上是您的url。
//因此，要将图像附加到给定的id，可以使用，
$（“#将_追加到_id”）。追加（“”）；
}

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

因此，基本上需要4个步骤来实现这一点：

显示上传表单（这是您在问题中所做的）

抓取步骤1中上传的图像，并将其保存到可访问的位置

在屏幕上显示图像

从_image.js调用get_barcode_对其进行解析

这里有一段代码供参考。它包含上述所有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之类的工具来获得更好的用户体验，但过程不会改变