Question

我的代码不起作用，我确定是因为代码不起作用正确。我想使用“提交”按钮来显示使用JSmol的分子。任何帮助！??

<script>
    var Info = {
    width: 550,
    height: 550,
    serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/jsmol.php ",
    use: "HTML5 WEBGL JAVA",
    j2sPath: "jsmol/j2s",
    script: "load 1BNA.pdb; set spin x 15; set spin y 15; set spin z 15; spin on; 
    wireframe on; spacefill off",
    console: "jmolApplet0_infodiv"
     }
</script>




  <form>
  Select a file: <input type="file" name="usr_file" required>
  <input type="submit" onclick="myFunction(Info)">
  </form>
  <p id="upload"></p>



<script>
function myFunction() {
var x = document.getElementById("Info").required;
document.getElementById("upload").innerHTML = x;
 }
</script>

Answer 1

我的回答可能会有些偏离，但是我在vuejs component中使用了相同的逻辑。
在输入更改事件中，即时消息捕获了该事件，因此我可以从中获取文件（onFilesUpload函数）。然后我使用FileReader（createImage函数）创建图像，然后将e.target.result推到我的images数组中。然后可以将图像结果设置为<img src="image_path" />

如何使我的提交按钮显示上传的文件而不离开当前页面

1 个答案: