使用jquery fileupload从剪贴板上传图像

cigdeys3  于 2023-01-04  发布在  jQuery
关注(0)|答案(2)|浏览(198)

我想使用ctrl + c或alt + PrtScr命令上传一张图片,然后粘贴到一个容器或多个容器中,以便将其上传到服务器上。我正在使用现有的JQuery函数(包括在下面),但我无法编码。请告诉我如何操作。

$(function(){  
var btnUpload=$('#upload');  
var status=$('#status');  
new AjaxUpload(btnUpload, {  
    action: 'upload-file.php',  
    //Name of the file input box  
    name: 'uploadfile',  
    onSubmit: function(file, ext){  
        if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){   
              // check for valid file extension   
            status.text('Only JPG, PNG or GIF files are allowed');  
            return false;  
        }  
        status.text('Uploading...');  
    },  
    onComplete: function(file, response){  
        //On completion clear the status  
        status.text('');  
        //Add uploaded file to list  
        if(response==="success"){  
            $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');  
        } else{  
            $('<li></li>').appendTo('#files').text(file).addClass('error');  
        }  
    }  
});});

如能提供任何帮助,我将不胜感激。

c0vxltue

c0vxltue1#

如果您想使用剪贴板中的数据,应该选中http://www.w3.org/TR/clipboard-apis/
基本上,一旦你得到了数据,你需要一个文件接口来上传它。
例如:

file = item.getAsFile() -> Returns a File object

因此,您需要以类似的方式处理粘贴的数据,以获得文件接口。
出发地:https://mobiarch.wordpress.com/2013/09/25/upload-image-by-copy-and-paste/

function handlePaste(e) {
for (var i = 0 ; i < e.clipboardData.items.length ; i++) {
    var item = e.clipboardData.items[i];
    console.log("Item type: " + item.type);
    if (item.type.indexOf("image") != -1) {
        uploadFile(item.getAsFile());
    } else {
        console.log("Discarding non-image paste data");
    }
}
watbbzwu

watbbzwu2#

$(document).on('paste', '#file-input', function(e) {
  var items = (e.clipboardData || e.originalEvent.clipboardData).items;
 for (index in items) {
var item = items[index];
if (item.kind === 'file') {
  var blob = item.getAsFile();
  var reader = new FileReader();
  reader.onload = function(event) {
    $('#image-preview').attr('src', event.target.result);
  }
  reader.readAsDataURL(blob);
}}});

相关问题