如何使用jQuery文件上传与Backbone.js的&安培; require.js [英] How use Jquery-file-upload with backbone.js & require.js
问题描述
我有谁与require.js工作,我想实现这个以下jQuery插件的应用Backbone.js的:
https://github.com/blueimp/jQuery-File-Upload
I have an backbone.js application who work with require.js and i want implement this following jquery plugin: https://github.com/blueimp/jQuery-File-Upload
我有以下这突:
https://github.com/blueimp/jQuery-File-Upload/wiki /基本-插件
如果任何人都可以给我发骨干应用工作的一个例子用这个插件,也可以帮助我与其他recommandations。
If anybody can send me an example of backbone app work with this plugin or can help me with other recommandations.
在你可以阅读我的code:
Before you can read my code:
require.config({
paths: {
'jquery' : 'common/vendors/jquery_2.1.0',
'underscore' : 'common/vendors/underscore_1.6.0',
'backbone' : 'common/vendors/backbone_1.1.2',
'layoutmanager' : 'common/vendors/backbone.layoutmanager_0.9.5',
'jquery.iframe-transport' : 'common/vendors/jquery.iframe.transport_1.0',
'jquery.ui.widget' : 'common/vendors/jquery.ui.widget_1.10.4',
'jquery.fileupload.ui' : 'common/vendors/jquery_fileupload/jquery.fileupload.ui_9.6.0',
'jquery.fileupload' : 'common/vendors/jquery_fileupload/jquery.fileupload_5.40.3'
},
shim: {
'jquery': {
exports: '$'
},
'underscore': {
exports: '_'
},
'backbone' : {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
'layoutmanager' : {
deps: ["backbone"]
}
}
});
我的骨干查看:
var define, selector, console;
define([
'jquery',
'underscore',
'backbone',
'layoutmanager',
'../../../../common/models/global/model_picture',
'jquery.ui.widget',
'jquery.iframe-transport',
'jquery.fileupload'
],
function (
$,
_,
Backbone,
LayoutManager,
PictureModel
) {
"use strict";
return Backbone.Layout.extend({
__class__ : "adPostPictureRow",
initialize: function () {
this.template = _.template($('#adpost_picture_row_template').html());
},
events: {
"change .adpost_picture_input_file" : "handleImageUpload"
},
handleImageUpload: function () {
selector = this.$('.adpost_picture_input_file')[0];
this.uploadProgress = 0;
this.model = new PictureModel({ files : selector.files[0] });
var test = $('#adpost_picture_fileupload', this.el).fileupload({
dataType: 'json',
autoUpload: true,
singleFileUploads: true,
url: '../upload/adpost/img',
done: function (data) {
console.log('upload done');
_.each(data.result, function (index, file) {
console.log(file.name);
});
},
add: function () {
// How can access to this function for see the console.log result
console.log('test upload ');
}
});
console.log(test);
}
});
});
感谢
推荐答案
我用我的骨干应用这个插件。
I'm using this plugin in my backbone Apps.
它的工作原理我用我的方式呈现里面的jQuery插件。这里我的code的样本。
It works for me using the Jquery plugin inside my render method. Here a sample of my code.
HTML文件。
<form id="Anything" action="the api url" method='post' encrtype="multipart/form-data">
<input type='file'/ accept='.txt'>
</form>
骨干查看
render: function(){
this.$el.html(this.template);
$("#Anything").fileupload({
dataType:'json',
add : this.AddFile,
fail: this.AddFileFail
});
AddFile : function(data){
return data.submit();
}
}
这篇关于如何使用jQuery文件上传与Backbone.js的&安培; require.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!