我按下输入按钮选择参与的图像数量,并希望查看现代状态的预览,不知道这只是一个图像。十想出来。帮助
在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;
答案 0 :(得分:0)
$("#fileupload").change(function () {
$("#dvPreview").html("");
on Image更改您的重置
#dvPreview
div为空。
此代码$("#dvPreview").html("");
将您的div重置为empty
所以remove
此代码并尝试它将起作用。
答案 1 :(得分:0)
您实际上可以使用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
}
}
})
})
&#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;
答案 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并将其复制到您项目的脚本文件夹中。
古德勒克