Question

在我的代码中，第一个div用于显示图像。上传ani图像的第二个div和第三个div将显示预览。我想在按下按钮的第一个div中显示上传的图像。

<html>
<body>
   <div id="imgspace1" class="container">
        <!-- image preview div -->
        <div id="image_preview1"><img id="previewing1" src="" /></div>
   </div>
<!--image upload part-->
   <div>
   <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
       <input type='file' onchange="readURL(this);" />
   </form>
   </div>
<div id="image_edit" class="container">
   <img id="image_preview" src="#" alt="Upload Image"/> </div>
<div>
<input id="confirm_button" type="button"  value="Confirmn" onclick="('')"/>
</div>
</body>
</html>

Answer 1

如果您主要关注的是显示图片预览，可以使用EZDZ js library。然后你只需要添加一个图像标签并导入.js和.css文件，你就可以看到预览，然后通过ajax上传它。

Answer 2

function readURL(input) {
    if ( input.files && input.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
             $('#previewing1').attr( "src", e.target.result );
        };       
        FR.readAsDataURL( input.files[0] );
    }
}

此代码将读取文件元素中的上传图像。

Answer 3

//在这里输入代码 $（文件）。就绪（函数（）{ $（ “＃confirm_button”）。点击（函数{ var preview = $（'＃image_preview'）。attr（'src'）; $（“＃previewing1”）。attr（“src”，preview）; }）; }）;

You can copy the src of third div image to first div image. And confirm button will be <input id="confirm_button" type="button"  value="Confirmn" />. You can write this unction in javascript also with onclick event.

当按下按钮时，如何将用户上传的图像传递给另一个div？

3 个答案: