jQuery HTML5文件拖放 [英] jQuery HTML5 file drag and drop
问题描述
我已经看过许多脚本，用于通过拖放将AJAX上传到服务器上。我发现的脚本不是jQuery，是相当大的，不能完全按照我想要的。
I have looked at many scripts for uploading images to the server with AJAX with drag and drop. The scripts I found are not jQuery, are quite large and don't do exactly what I want.
将来应该使用jQuery，AJAX和PHP上传图像。
In the future it should upload an image with jQuery, AJAX and PHP.
我的问题
在我看过的很多例子中e.dataTransfer.files工作。在我的情况下，它不。我需要绑定它吗？
In many of the example I've looked at e.dataTransfer.files work. In my case it don't. Do I need to bind it somehow?
我希望jQuery尽可能多。
I want jQuery as much as possible.
JsFiddle
尽可能多地玩...
代码
<html>
<head>
<style type="text/css">
#dropzone {
border: 2px dashed #ccc;
width: 300px;
height: 200px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#dropzone').on({
dragenter: function(e) {
$(this).css('background-color', 'lightBlue');
},
dragleave: function(e) {
$(this).css('background-color', 'white');
},
drop: function(e) {
e.stopPropagation();
e.preventDefault();
console.log(e.dataTransfer.files);
}
});
});
</script>
</head>
<body>
<div id="dropzone">
Drop files here
</div>
</body>
</html>
推荐答案
我发现这是jQuery.1.8中的一个错误。这行应该在 $（'。dropzone'）之前。
I found out that it's a bug in jQuery.1.8. This row should be before $('.dropzone').
$.event.props.push('dataTransfer');
最终HTML代码
<html>
<head>
<style type="text/css">
.dropzone {
border: 2px dashed #ccc;
width: 300px;
height: 200px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var filename = '';
var image_data = '';
$.event.props.push('dataTransfer');
$('.dropzone').on({
dragenter: function(e) {
$(this).css('background-color', 'lightBlue');
},
dragleave: function(e) {
$(this).css('background-color', 'white');
},
drop: function(e) {
e.stopPropagation();
e.preventDefault();
var file = e.dataTransfer.files[0];
var fileReader = new FileReader();
var this_obj = $(this);
fileReader.onload = (function(file) {
return function(event) {
// Preview
filename = file.name;
image_data = event.target.result;
$(this_obj).next().html('<a href="#" class="upload-file">Upload file</a>');
$(this_obj).html('<img style="max-width: 200px; max-height: 200px;" src="' + event.target.result + '">');
};
})(file);
fileReader.readAsDataURL(file);
}
});
// Upload file
$(".upload-file").live("click", function(e){
e.preventDefault();
var this_obj = $(this);
var image_data = $(this_obj).parent().prev().find('img').attr('src');
$.post(
'send_image.php',
{
data: image_data,
filename: filename
}, function(response){
$(this_obj).parent().prev().html(response);
$(this_obj).remove();
}
);
//console.log('ok');
});
});
</script>
</head>
<body>
<!-- Multiple dropzones -->
<div class="dropzone">
Drop files here
</div>
<div id="meta"></div>
<div class="dropzone">
Drop files here
</div>
<div id="meta"></div>
</body>
</html>
send_image.php中的PHP代码
<?php
$raw_data = $_POST['data'];
file_put_contents(
'image123.jpg',
base64_decode(
str_replace('data:image/jpeg;base64,', '', $raw_data)
)
);
?>
<br>
<?php echo '<img style="max-width: 200px; max-height: 200px;" src="' . 'image123.jpg' . '">'; ?>
这篇关于jQuery HTML5文件拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
