- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个 HTML 表单,其中包含一个带有多个文件选择的文件输入字段,我也有一个正在开发的拖放功能。我的问题是,如果可能的话,如何无缝集成这两个功能?
理想情况下,我希望用户通过拖放或文件对话框来选择他们的文件。用户完成文件选择后,单击表单提交按钮进行上传。
我想我的主要不确定性是如何将拖放的文件绑定(bind)到文件输入字段以提交表单。
最佳答案
我写了一些 jQuery 代码来做这件事,告诉我它是否适合你。
<!DOCTYPE html>
<html>
<head>
<title>Multiple DnD Uploader</title>
<link rel="stylesheet" href="style.css" />
<script type = "text/javascript" src = "../music/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#drop').change(function(event){
files = event.target.files;
$('#drop').css('display', 'none');
for(var i = 0, len = files.length; i < len; i++) {
if((files[i].fileName+"").substring((files[i].fileName+"").length-4,(files[i].fileName+"").length)=='.mp3'){
$.ajax({
type: "POST",
url: "uploader.php?id="+i,
contentType: "multipart/form-data",
headers: {
"X-File-Name" : files[i].fileName,
"X-File-Size" : files[i].fileSize,
"X-File-Type" : files[i].type
},
beforeSend: function() {
$('#info').append('<li class="indicator"><span class="label">File Name :</span> '+files[i].fileName+' | <span class="label">Size :</span> ' + files[i].fileSize + ' | <img id="'+i+'" src="loading.gif" /></li>');
},
processData: false,
data: files[i],
success: function(data){
$('#'+data).attr('src', 'check.png');
},error: function(data){
$('#info').append('Error: ' + data + '<br />');
}
});
}else{
$('#info').append('Error: Incorrect file type. Looking for .mp3');
}
}
});
});
</script>
</head>
<body>
<div id="drop">
<h1>Drop files here</h1>
<p>To add them as attachments</p>
<input type="file" multiple="true" id="filesUpload" />
</div>
<div id="info">
</div>
</body>
</html>
PHP 文件如下所示:
<?php
$headers = array();
foreach ($_SERVER as $k => $v){
if(substr($k, 0, 5) == "HTTP_"){
$k = str_replace('_', ' ', substr($k, 5));
$k = str_replace(' ', '-', ucwords(strtolower($k)));
$headers[$k] = $v;
}
}
$file = new stdClass;
$file->name = basename($headers['X-File-Name']);
$file->size = $headers['X-File-Size'];
$file->content = file_get_contents("php://input");
if(file_put_contents('files/'.$file->name, $file->content))
echo $_GET['id'];
?>
关于HTML5拖放和多文件上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6231542/
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。 我不明白静态属性之间的区别: p
当元素被拖放时,有没有办法从被拖动的元素中获取 id(或其他属性值)? 例如,在左侧,我有一堆 div,我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
每当我更改其中一个类属性时,我想设置一个修改标志,如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
由于某种原因,我下面的代码曾经可以正常工作,但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
为什么将 ; 放在最佳实践中?在函数定义的末尾。 例如 var tony = function () { console.log("hello there"); }; 优于: var tony
我在容器内有一个位图。当我拖动容器时,光标变为编辑文本形状,图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。 这是我的代码,所以你可以看到我有 RTFM: function createIc
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。 当我让 Visual Studio 20
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。 我在一本书上找到这样声
我正在设置多个方法,想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。 主要方法: public static void Main(string[] args) { i
我正在尝试使用 crontab 编写一个简单的任务,将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
有人可以告诉我如何使用这个解决方案来解决我的问题吗?我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true,但是当我拖动弹出面板并将其放到新位置时,它
所以,基于this answer ,我有一组可以拖放并卡入到位的 div。唯一的问题是,可拖动的 div 具有不同的高度,我需要它们始终捕捉到目标的底部,而不是顶部。 您可以在this JsFiddl
我是一名优秀的程序员,十分优秀!