文件上传和显示在div多个

时间：2016-08-08 10:15:11

标签： javascript jquery

我创建了一个函数来从输入类型=“文件”中选择图像并在div上显示上传的文件，但问题是会有多个输入文件，就像它将是3个输入文件我绑了很多但是问题我面临的只是1张图片正在显示，而另外2张图片没有显示。

function head(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#head_shot').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#head").change(function() {
  head(this);
});

function side_profile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#side_profile').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#side_profile").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#full").change(function() {
  full(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile" id="side_profile">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full">
    </div>
  </div>
</div>

4 个答案:

答案 0 :(得分：2)

要解决您的问题，请将图片字段的ID更改为其他值，因为它与文件输入的ID不相符。

  

一般规则：您不能在DOM中使用具有相同ID的元素

＆＃13;
＆＃13; 
function head(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#head_shot-img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#head").change(function() {
  head(this);
});

function side_profile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#side_profile-img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#side_profile").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full-img').attr('src', e.target.result);
    }

    reader3.readAsDataURL(input.files[0]);
  }
}

$("#full").change(function() {
  full(this);
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot-img" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile-img" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full-img" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile" id="side_profile">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full">
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这是一个建议

我正在使用Jquery Multifile而没有问题。

  1. 该插件允许您上传单个文件甚至多个文件。 每批上传都会分组并分配一个关闭按钮，因此您只能删除特定文件。
  2. 下一个不错的功能是图像预览。

答案 1 :(得分：1)

  1. 循环浏览所有选定的文件
  2. 为每个文件制作新的阅读器
  3. 为照片化容器中的每个图像附加新的img元素，并将新图像的src指定为当前文件内容

    4. 请查看Working Demo at plunker 

    function showSelectedPhotoes(input) {

  if(!input.files)
    return;

  for(i=0;i<input.files.length;i++)
  {

    var reader3 = new FileReader();    
    reader3.onload = function(e) {
      $('#all_photoes_container').append('<img width="100" height="100" src='+e.target.result+' />')
    };
    reader3.readAsDataURL(input.files[i]);
  }        
}

答案 2 :(得分：1)

乍一看，这是一个ID冲突。在您的第一个图片选择中，您为img设置了id="head_shot"，然后为按钮设置了id="head"。它工作正常，因为ID不同。但是稍后您对图像和按钮都有id="side_profile"，因此脚本会忽略具有相同ID的第二个元素。这是一个固定版本：

＆＃13;
＆＃13; 
function head(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#head_shot').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#head").change(function() {
  head(this);
});

function side_profile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#side_profile').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#side_profile2").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full').attr('src', e.target.result);
    }

    reader3.readAsDataURL(input.files[0]);
  }
}

$("#full2").change(function() {
  full(this);
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile2" id="side_profile2">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full2">
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

PS。最后一个函数中的reader3变量中也有一个拼写错误 - 在某些时候你丢失了＆＃34; 3＆＃34;。

答案 3 :(得分：0)

  

您可以看到我已优化的更新和优化的代码Here...   您的代码使用html和jquery更改，这对您非常有用。和   你也可以上传多个文件。

您的HTML代码 

<div class="img-sec">
   <div class="container">
      <div class="col-sm-4">
         <div class="img-box">
            <h4>head shot</h4>
            <div id="head_shot"></div>
         </div>
      </div>
      <div class="col-sm-4">
         <div class="img-box">
            <h4>Side Profile</h4>
            <div id="side_profile"></div>
         </div>
      </div>
      <div class="col-sm-4">
         <div class="img-box">
            <h4>Full Length</h4>
            <div id="full_length"></div>
         </div>
      </div>
   </div>
</div>
<div class="picture_sec">
   <div class="container">
      <div class="lb-put">
         <label>Head Shot</label>
         <input type="file" class="form-control" name="head_shot" id="head" multiple>
      </div>
      <div class="lb-put">
         <label>Side Profile</label>
         <input type="file" class="form-control" name="side_profile" id="side" multiple>
      </div>
      <div class="lb-put">
         <label>Full Length</label>
         <input type="file" class="form-control" name="full_length" id="full" multiple>
      </div>
   </div>
</div>

您的jQuery代码： 

$('input[type="file"]').change(function() {
    var elemPreview = '#' + $(this).attr('name');
    var elemChange = $(this);
    fileupload(elemChange, $(elemPreview));
});

function fileupload(elemChange, elemPreview) {
    if (typeof(FileReader) != "undefined") {
        var dvPreview = elemPreview;
        dvPreview.html("");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        $(elemChange[0].files).each(function() {
            var file = $(this);
            if (regex.test(file[0].name.toLowerCase())) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $("<img />");
                    img.attr("style", "height:100px;width: 100px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);
            } else {
                alert(file[0].name + " is not a valid image file.");
                dvPreview.html("");
                return false;
            }
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
}
相关问题
最新问题