我想上传更多的图片

i want more images upload

本文关键字：更新时间：2023-09-26

我按下输入按钮选择要参与的图像数量，并想查看现代状态的预览。我不知道这是如何产生的，只有一个图像。十个人想出来。帮助

在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.");
    }
  });
});

.load {
  width: 20%;
}
#dvPreview {
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  min-height: 400px;
  min-width: 400px;
  display: none;
}

<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>

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

在图像上更改您的种子#dvPreviewdiv为空。

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

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

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
      }
    }
  })
})

.load {
  width: 20%;
}
#dvPreview {
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  min-height: 400px;
  min-width: 400px;
  display: none;
}

<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>

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

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

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

将"src"路径替换为项目中脚本文件的真实文件路径或cdn的url。就这样。

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

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

好运

没有找到相关文章