如何在单个按钮中从单独的文件夹上传多个图像
How to upload multiple images from separate folder in single button
我正在尝试使用以下代码开发类似匹配以下内容(图像到图像)的应用程序,
MyJSp.jsp
<div id="container" >
<div>
<span>Question Images</span><br><br>
<img alt="Image1" id="Image1" src="" width="130px" height="90px"><br><br>
<img alt="Image2" id="Image2" src="" width="130px" height="90px"><br><br>
<img alt="Image3" id="Image3" src="" width="130px" height="90px"><br><br>
<img alt="Image4" id="Image4" src="" width="130px" height="90px"><br><br>
<img alt="Image5" id="Image5" src="" width="130px" height="90px"><br><br>
</div>
<div>
<span>Answer Images</span><br><br>
<img alt="Image6" id="Image6" src="" width="130px" height="90px"><br><br>
<img alt="Image7" id="Image7" src="" width="130px" height="90px"><br><br>
<img alt="Image8" id="Image8" src="" width="130px" height="90px"><br><br>
<img alt="Image9" id="Image9" src="" width="130px" height="90px"><br><br>
<img alt="Image10" id="Image10" src="" width="130px" height="90px"><br><br>
</div>
</div>
<span>Upload Image Questions</span><input type="file" id="files1" name="files1[]" value="Upload Questions" multiple><br><br>
Upload Image Answers<input type="file" id="files2" name="files2[]" value="Upload Answers" multiple>
MyJS.js :
$(function(){
document.querySelector('#files1').addEventListener('change', handleFileSelect, false);
document.querySelector('#files2').addEventListener('change', handleFileSelect2, false);
function handleFileSelect(evt) {
// alert();
var files = evt.target.files; // FileList object
// alert("1");
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile, count) {
return function(e) {
if (count > 5)
{
alert("You can upload only 5 images.");
}
else{
$('#Image'+count).prop("src",e.target.result);
make_visible_ADDDB_Count=make_visible_ADDDB_Count+1;
}
};
})(f,i+1);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
// $('.imgclass').draggable();
}
//************ Answer Images Here
function handleFileSelect2(evt) {
var files = evt.target.files; // FileList object
// alert("1");
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile, count) {
return function(e) {
if (count > 5)
{
alert("You can upload only 5 images.");
}
else{
count=count+5;
$('#Image'+count).prop("src",e.target.result);
}
};
})(f,i+1);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
// $('.imgclass').draggable();
}
});
从上面的代码中,用户可以一次上传 5 张图像,但他们觉得很难一次从单独的文件夹中添加图像。同时,如果他们一个接一个地添加,那么所有图像只会替换第一个图像标签。
注意:使用ServletFileUpload.isMultipartContent(request)
插入数据库的文件计数非常重要
那么当他们使用单个文件上传按钮逐个上传时,如何增加文件计数(如 5 或 2 或 3 个选定的文件)呢?
注意:这可能是愚蠢或不可能的问题,但对我来说非常需要。
这是我的小提琴 http://jsfiddle.net/Manivasagam/xbtxzaax/
试试这个 http://jsfiddle.net/xbtxzaax/1/
您可以通过单击行上的图像来更新该行。
nu76
相关文章:
- 如何将乳胶配方奶粉图像保存到Asp.net中的文件夹中
- 在ng重复循环中显示来自不同文件夹的图像
- 如何通过资产管道提供Javascript中子文件夹中的图像
- 可在多个相册文件夹中查找的动态图像库
- 如何使用javascript从文件夹中获取图像并发布直接链接
- Yii2从js脚本的页面上添加来自供应商文件夹的图像、css、js文件
- 如何在PHP中使用url保护我的图像和文件夹免受直接访问
- 使用文件夹路径名保存所有图像文件和文件名
- 将图像输出到浏览器,然后再将其保存到文件夹
- jQuery:用文件夹中的图像填充数组.或者使用AJAX从文件夹加载图像
- 将样式表、javascript和图像分离到不同文件夹中的优势
- 使用javascript从磁盘中的文件夹中选择所有图像的路径
- 如何从本地文件夹(磁盘存储)读取或获取图像文件,并使用nodejs服务器将其发送到Angularjs
- Dropzone.js没有将图像上传到文件夹
- 如何使用javascript获取文件夹中的图像列表
- 将文件夹中的所有图像包括在阵列中的最佳方式是什么
- Android 引用 JavaScript 文件中的资产文件夹图像
- jQuery日期选择器上一个和下一个按钮没有显示,如何指向css中的主题文件夹图像
- 我如何读取文件夹图像和显示html内
- 在Canvas中循环遍历文件夹图像