2012-11-22 47 views
2

我想在客戶端使用dojo FileUploader和服務器端的express.js上傳圖像。圖片上傳完成後,我想預覽上傳的圖片。 這裏是我的代碼: -dojo FileUploader與express.js

的上傳圖片Ajax請求: -

require(['dojo/dom','dojo/_base/array','dojo/dom-construct','dojo/query',"dojo/request",'dojo/on',"dojox/form/FileUploader","dojo/domReady!"],function(dom,array,domConstruct,query,xhr,on,FileUploader) 
    { 
     var upld = new FileUploader(
     { 
     degradable:true, 
     uploadUrl:'http://localhost:8005/testy', 
     uploadOnChange:false, 
     title:'uploader, 
     isDebug:true, 
     devMode:true 
     },'test'); 

     on(upld,'change',function(data) 
     { 
     array.forEach(data,function(d) 
     { 
      dom.byId('filename').innerHTML = d.name; 
      }); 
     }); 
     on(upld,'complete',function(data) 
     { 
     array.forEach(data, function(d) 
     { 
      dom.byId("rgtCol").innerHTML += '<img src="'+d.file+'" />'; 
     }); 
     }); 
     on(dom.byId('btn'),'click',function(evt) 
     { 
     upld.upload(); 
     }); 
    }); 

的html代碼: -

<div id='test'>Uploader</div> 
<div id='filename'></div> 
<div id='rgtCol'></div> 
<input type='button' id='btn' label='submit' /> 

服務器端代碼: - 這裏是我的服務器端代碼: -

var express = require('express'), 
    fs = require('fs'); 
    app = express.createServer(); 

    app.use(express.bodyParser()) 
    app.post('/testy', function(req, res) 
    { 
     var filename = req.body.Filename; 
     var body = req.files.flashUploadFiles.path; 
     fs.createReadStream(body).pipe(fs.createWriteStream('tmp/' + filename)); 

     res.send('tmp/' + filename); 
    }); 

app.listen(8005); 

我的問題是圖片上傳但我無法在客戶端預覽上傳的圖像。我能夠做服務器端而不是在express.js

在此先感謝這些用PHP文件...

回答

0

當涉及到推回二進制數據(如圖像)的用戶,我碰巧使用binaryJS。及其對socketIO建,你可以觸發後預覽上傳通過給

server.on('connection', function(client){ 
    // Stream a flower as a hello! 
    var file = fs.createReadStream(__dirname + '/flower.png'); 
    client.send(file); 
}); 

這樣,您就可以將圖像發送到用戶的預覽完成。如果你願意,你可能想通過ImageMagick創建一個縮略圖,但那多了一個。我給你看的例子是hello world example of binaryJS

+0

我正在做同樣的事情,但它不再工作。 –