的node.js从iPad上上传图片与socketio文件上传

Question

我写在express.js应用程序/ Node.js的

我有一个输入型的“文件”上传图像的形式。

我希望我的图片直接上传，无需用户确认。并在裁剪并存储到目录后显示在用户屏幕上。

为此，我使用socketio-file-upload库。

它在电脑上效果很好。我可以上传图片并显示它们。

的问题是与iPad（我还没有尝试iPhone还）

在Web应用程序，当我点击“浏览”按钮，我可以选择现有的图片或拍照。我试图拍摄一张照片并上传，但没有hapens ...

这里是服务器的上传代码：

io.of('/register').on('connection', function (socket) { 
/***************FILE UPLOAD***********************/ 
// Make an instance of socketioFileUploadServer and listen on this socket: 
var uploader = new socketioFileUploadServer(); 
uploader.dir = __dirname + '/client/tmp/markers'; 
uploader.listen(socket); 
// Do something when a file is saved: 
uploader.on('saved', function(event){ 
    console.log('Original saved'); 
    // resize and rename image with a unique id 
    var newName = Math.random().toString(36).substr(2, 9); 
    // marker 32x32 
    easyimg.rescrop({src:path.resolve(__dirname, 'client/tmp/markers/' + event.file.name), dst:path.resolve(__dirname, 'client/tmp/markers/' + newName + '_marker'), width:32, height:32}, function(err, image) { 
     if (err) throw err; 
     console.log('Resized and cropped: ' + image.width + ' x ' + image.height); 
     // marker is uploaded - resized - croped, now display it 
     socket.emit('displayMarker', {markerPath : '/tmp/markers/' + newName + '_marker', markerName : newName}); 
     // remove original from file system 
     fs.unlink(path.resolve(__dirname, 'client/tmp/markers/' + event.file.name), function(){ 
      if (err) throw err; 
      console.log('Original removed'); 
     }); 
    }); 
}); 

uploader.on('start', function(event){ 
    console.log('Client start upload'); 
    socket.emit('displayOverlay'); 
}); 

// Error handler: 
uploader.on('error', function(event){ 
    console.log("Error from uploader", event); 
}); 
}); 

和客户端：

document.addEventListener("DOMContentLoaded", function(){ 

// REGISTRATION MARKER 
var socketMarker = io.connect('/register'); 
var siofuMarker  = new SocketIOFileUpload(socketMarker); 

siofuMarker.listenOnInput(document.getElementById("uploadMarkerFromExploratorInput")); 

// Do something when a file is uploaded: 
siofuMarker.addEventListener("complete", function(event){ 
    $('.overlay').hide(); 
}); 

// display loader window 
socketMarker.on('displayOverlay', displayOverlay); 

// server send we can display the marker in the register step1 view 
socketMarker.on('displayMarker', function(data) { 
    $('#markerImage').html(''); 
    $('#markerImage').html('<img src="' + data.markerPath + '" />'); 
    $('#markerImageName').val(data.markerName); 
}); 

}); 

有一台电脑，控制台将显示：

Client start upload 
Original saved 
Resized and cropped: 32 x 32 
Original removed 

而且与iPad：

Client start upload 

有人有想法或其他方式有相同的结果吗？

Apreciate your help。 C.

Answer 1

正如我怀疑，你需要正确的属性添加到HTML标记文件输入元素：

<input type="file" accept="image/*" capture="camera"> 

这应该做的伎俩。要理解的最重要的部分是“接受”属性。