我正在使用
JQuery / JS实现拖放图像控制.已经完成的是用户拖动一些图像文件并放入html页面.删除文件后,我只显示文件名及其大小.
我还需要在页面上显示图像.但是我无法在jquery中获取图像文件内容.
以下是我写的代码:
function handleFileUpload(files,obj) { for (var i = 0; i < files.length; i++) { var fd = new FormData(); fd.append('file',files[i]); var status = new createStatusbar(obj); //Using this we can set progress. status.setFileNameSize(files[i].name,files[i].size); sendFiletoServer(fd,status); } } $(document).ready(function () { var obj = $("#dragandrophandler"); obj.on('dragenter',function (e) { e.stopPropagation(); e.preventDefault(); $(this).css('border','2px solid #0B85A1'); }); obj.on('dragover',function (e) { e.stopPropagation(); e.preventDefault(); }); obj.on('drop',function (e) { $(this).css('border','2px dotted #0B85A1'); e.preventDefault(); var files = e.originalEvent.dataTransfer.files; //We need to send dropped files to Server handleFileUpload(files,obj); }); $(document).on('dragenter',function (e) { e.stopPropagation(); e.preventDefault(); }); $(document).on('dragover',function (e) { e.stopPropagation(); e.preventDefault(); obj.css('border','2px dotted #0B85A1'); }); $(document).on('drop',function (e) { e.stopPropagation(); e.preventDefault(); }); });
在调试函数handleFileUpload上,它只显示以下属性:
你能帮忙吗?
谢谢
解决方法
我没有尝试过,但你正在使用
HTML5 File API.你的图像是File类的实例化,它本身是Blob的子类.使用
FileReader,您可以访问文件的内容. MDN上的这篇文章链接到网络中的另一篇文章,该文章展示了如何使用它:
Showing thumbnails of User-selected images
基本上,您可以像这样访问内容:
function handleFileUpload( files,obj ) { for( var i = 0; i < files.length; i++ ) { // ... your other code var reader = new FileReader(); reader.onload = function(){ // Should look like data:,<jibberish_data> based on which method you called console.log(e.target.result); }; reader.readAsDataURL(files[i]); } }
原文地址:https://www.jb51.cc/js/155383.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。