我想要更多图片上传

时间:2016-10-27 08:40:58

标签: javascript jquery html

我按下输入按钮选择参与的图像数量,并希望查看现代状态的预览,不知道这只是一个图像。十想出来。帮助

在html文件下处理它plz



$(function() {
  $("#fileupload").change(function() {
    $("#dvPreview").html("");
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
    if (regex.test($(this).val().toLowerCase())) {
      if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
        $("#dvPreview").show();
        $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
      } else {
        if (typeof(FileReader) != "undefined") {
          $("#dvPreview").show();
          $("#dvPreview").append("<img class=load>");
          var reader = new FileReader();
          reader.onload = function(e) {
            $("#dvPreview img").attr("src", e.target.result);
          }
          reader.readAsDataURL($(this)[0].files[0]);
        } else {
          alert("This browser does not support FileReader.");
        }
      }
    } else {
      alert("Please upload a valid image file.");
    }
  });
});
&#13;
.load {
  width: 20%;
}
#dvPreview {
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  min-height: 400px;
  min-width: 400px;
  display: none;
}
&#13;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" language="javascript"></script>
<script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form method="post">
  <input id="fileupload" type="file" multiple="multitple" class="multi with-preview" />
  <hr />
  <b>Live Preview</b>
  <br />
  <br />
  <div id="dvPreview">
  </div>
</form>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

$("#fileupload").change(function () {
        $("#dvPreview").html("");

on Image更改您的重置 #dvPreview div为空。

此代码$("#dvPreview").html("");将您的div重置为empty 所以remove此代码并尝试它将起作用。

答案 1 :(得分:0)

您实际上可以使用URL.createObjectURL,这比FileReader简单得多,而且它也是同步的...... 顺便说一下,你正在加载多个jquery版本......

&#13;
&#13;
jQuery(function($) {
  var URL = window.URL || window.webkitURL || {}
  
  // no idea to add listener to the elm since you can't show them
  if(!URL.createObjectURL) return console.info("can't preview images")
  
  $("#fileupload").change(function() {
    $("#dvPreview").html("")
    
    // using the Image we can actually test if it's a image no mather what
    // extension it is. This would avoid simple hacks when client change
    // `hack.js` to `hack.png`


    // since you have multiple files you can not do `$(this).val()`
    // Sometimes you don't need jQuery... `this.value` is simpler here...
    // instead you need to loop over the `files` property...

    for (let file of this.files) {
      // screw older ie versions 
      let img = new Image
      img.src = URL.createObjectURL(file)
      img.onload = () => {
        $("#dvPreview").show()
        $("#dvPreview").append(img)
      }
      img.onerror = () => {
        // the file is not an image
      }
    }
  })
})
&#13;
.load {
  width: 20%;
}
#dvPreview {
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  min-height: 400px;
  min-width: 400px;
  display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- you are loading multple jquery version!! -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> -->


<form method="post">
  <!-- using accept="image/*" means that you are gona get right format -->
  <input id="fileupload" accept="image/*" type="file" multiple="multitple" class="multi with-preview" />
  <hr>
  <b>Live Preview</b>
  <br><br>
  <div id="dvPreview"></div>
</form>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这是因为您的脚本导入行错误。

<script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

您只看到一个图像预览,因为尚未加载jquery.MultiFile.js。您可以检查浏览器的开发者工具是否发生该错误。

替换&#34; src&#34;在项目中使用您的脚本文件的真实文件路径或使用cdn的url的路径。就像这样。

<script src="/Scripts/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

您需要从这里download下载jquery.MultiFile.js并将其复制到您项目的脚本文件夹中。

古德勒克