Question

抱歉，与此前提出的版本不完全相同。我尝试过这些解决方案无济于事。

我与一些人合作，用我们正在研究的片段解决了一些问题。最后得到了JSfiddle我们如何需要它，但无论出于何种原因，它都没有在纯HTML网站上工作。内容看起来要加载，但选择图像后预览不起作用。

这是JSfiddle在这里工作：http://jsfiddle.net/ELcf6/568/

以下是编译到单个页面中进行测试的所有代码段。这是一个似乎不起作用的例子。 JSfiddle是否注入了我可能缺少的任何先决条件？

任何帮助解决这个问题都将非常感激。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var imageLoader = document.getElementById('filePhoto');
        imageLoader.addEventListener('change', handleImage, false);
    
    function handleImage(e) {
    		var filetype = imageLoader.files[0].type;
        var reader = new FileReader();
        reader.onload = function (event) {
            if(filetype.indexOf("image") > -1){
            $('.uploader img').attr('src',event.target.result);
            }else if(filetype.indexOf("video") > -1){
            
            $('.uploader video')[0].src =reader.result; 
            }
            
        }
        reader.readAsDataURL(e.target.files[0]);
    }
    </script>
    <style type="text/css">
    .uploader {
        position:relative;
        overflow:hidden;
        width:300px;
        height:350px;
        background:#f3f3f3;
        border:2px dashed #e8e8e8;
    }
    
    #filePhoto{
        position:absolute;
        width:300px;
        height:400px;
        top:-50px;
        left:0;
        z-index:2;
        opacity:0;
        cursor:pointer;
    }
    
    .uploader img,.uploader video{
        position:absolute;
        width:302px;
        height:352px;
        top:-1px;
        left:-1px;
        z-index:1;
        border:none;
        object-fit:cover;
    }
    </style>
    <title></title>
    </head>
    
    <body>
      <div class="uploader" onclick="$('#filePhoto').click()">
        click here or drag here your images for preview and set userprofile_picture data
        <img src=""/>
        <video></video>
        <input type="file" name="userprofile_picture"  id="filePhoto" />
      </div>
    </body>
    </html>

＆＃13;

Answer 1

你的脚本在加载DOM之前就已经运行了，这就是为什么你得到“无法读取属性'addEventListener'的null”错误。

移动脚本，使其恰好在body标记结束之前。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!DOCTYPE html>
        <html>
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">
        .uploader {
            position:relative;
            overflow:hidden;
            width:300px;
            height:350px;
            background:#f3f3f3;
            border:2px dashed #e8e8e8;
        }
        
        #filePhoto{
            position:absolute;
            width:300px;
            height:400px;
            top:-50px;
            left:0;
            z-index:2;
            opacity:0;
            cursor:pointer;
        }
        
        .uploader img,.uploader video{
            position:absolute;
            width:302px;
            height:352px;
            top:-1px;
            left:-1px;
            z-index:1;
            border:none;
            object-fit:cover;
        }
        </style>
        <title></title>
        </head>
        
        <body>
          <div class="uploader" onclick="$('#filePhoto').click()">
            click here or drag here your images for preview and set userprofile_picture data
            <img src=""/>
            <video></video>
            <input type="file" name="userprofile_picture"  id="filePhoto" />
          </div>
          
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            var imageLoader = document.getElementById('filePhoto');
            imageLoader.addEventListener('change', handleImage, false);
        
        function handleImage(e) {
        		var filetype = imageLoader.files[0].type;
            var reader = new FileReader();
            reader.onload = function (event) {
                if(filetype.indexOf("image") > -1){
                $('.uploader img').attr('src',event.target.result);
                }else if(filetype.indexOf("video") > -1){
                
                $('.uploader video')[0].src =reader.result; 
                }
                
            }
            reader.readAsDataURL(e.target.files[0]);
        }
        </script>
          
        </body>
        </html>

代码在JSfiddle中有效，但在我的网页

1 个答案: