我设计了一个简单的表单,允许用户将文件上传到服务器.最初,表单包含一个"浏览"按钮.如果用户想要上传多个文件,他需要点击"添加更多文件"按钮,在该表单中添加另一个"浏览"按钮.提交表单后,文件上载过程将在"upload.php"文件中处理.它适用于上传多个文件.现在我需要使用jQuery的'.submit()'提交表单,并将'ajax ['.ajax()']请求发送到'upload.php'文件来处理文件上传.
这是我的HTML表单:
<form enctype="multipart/form-data" action="upload.php" method="post">
<input name="file[]" type="file" />
<button class="add_more">Add More Files</button>
<input type="button" id="upload" value="Upload File" />
</form>
Run Code Online (Sandbox Code Playgroud)
这是JavaScript:
$(document).ready(function(){
$('.add_more').click(function(e){
e.preventDefault();
$(this).before("<input name='file[]' type='file' />");
});
});
Run Code Online (Sandbox Code Playgroud)
以下是处理文件上传的代码:
for($i=0; $i<count($_FILES['file']['name']); $i++){
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];
if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
echo "The file has been uploaded successfully <br />";
} else{
echo "There was an error uploading the file, please try again! <br />"; …Run Code Online (Sandbox Code Playgroud) 我遇到了django-uploadify(多文件上传)应用程序,但在项目的wiki中描述了唯一的模板用法.我需要将它与django admin集成.有任何想法吗?
该图像字段只允许一个文件同时上传.是否有一个模块可以在Drupal 7中启用多重上传?
我有以下代码:
<input type="file" multiple='multiple'>
<div id="thumbs"></div>
<script type="text/javascript">
$('input[type="file"]').change(function() {
$('#thumbs').html('');
$.each(this.files, function() {
readURL(this);
})
});
function readURL(file) {
var reader = new FileReader();
reader.onload = function(e) {
$('#thumbs').append('<img src="' + e.target.result + '" width="20%">')
$('#quantity').text(i)
}
reader.readAsDataURL(file);
}
</script>
Run Code Online (Sandbox Code Playgroud)
这是一个多上传输入.当我选择"x"图片时,它会为它们创建缩略图.这完全有效,但我想知道如何获取文件名(如果图片名为"sun.jpg",我想得到"sun"),并将它们附加到图片中.我试过这个:
$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+e.name+'</p>')
Run Code Online (Sandbox Code Playgroud)
不过e.name是undefined.
这是一切的小提琴:https://jsfiddle.net/ugs6rzqx/1/
任何帮助,将不胜感激.谢谢.
multi-upload ×4
jquery ×2
ajax ×1
django ×1
django-admin ×1
drupal-7 ×1
file-upload ×1
html5 ×1
javascript ×1
php ×1
uploadify ×1