首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在html表中上载前无法预览图像

在html表中上载前无法预览图像
EN

Stack Overflow用户
提问于 2018-08-31 02:13:28
回答 1查看 152关注 0票数 0

我是php和jquery的新手,我正在尝试在上传之前预览图像。

在这里我还添加了更多的功能,如何在上传之前预览所有的图像

这是我的代码,我尝试并遵循了这个url,但不能正常工作。

http://jsfiddle.net/LvsYc/

代码语言:javascript
复制
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
      $(function(){
   $("#imgInp").change(function(){
        readURL(this);
    });
        $("#add_field").click(function () {
          $("#table_container").append($("#temp_div").html());
        });
      })
代码语言:javascript
复制
.image-upload > input
{
    display: none;
}

.image-upload img
{
    width: 50px;
    cursor: pointer;
}
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" enctype="multipart/form-data"> 
  <table id="table_container">
                <tr>
                    <th><label class="lbl-header">My Hobies</label></th>
                    <th><label class="lbl-header">Image</label></th>
                </tr>
                <tr>
                  <td><input type="text" name="hobies[]" value=""></td>
                  <td>
                    <div class="image-upload">
                          <label for="file-input">
                              <img src="upload.jpg"/>
                          </label>
                          <input id="file-input" id="imgInp"  type="file" name="image[]" />
                          <img src="#" alt="image" id="blah">
                    </div>
                  </td>
                </tr>
               </table>
                 
                <input type="submit" name="submit" value="Submit">
</form>

感谢您的时间和帮助

EN

回答 1

Stack Overflow用户

发布于 2018-08-31 04:41:05

它对第一个有效吗?

如果是,你的问题是在加载js时,新的图片上传域基本上不存在,所以新的域没有考虑到这个变化。

其次,你使用一个id来做这件事,这是错误的,你只能有一个id,所以你应该在一个类上使用你的修改。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52103113

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档