Question

我创建了一个DOJO浏览按钮，将文件上传到服务器。按钮工作正常。但是，我希望能够将我的文件选择限制为* .jpg文件。在DOJO dojox.form.FileUploader中，我可以使用Filemask属性来选择/屏蔽要上传到服务器的文件。示例：

var fileMask = ["Images", "*.jpg;*.jpeg;*.gif;*.png"]

var uploader = new dojox.form.FileUploader({
    button:dijit.byId("myFakeButton"),
    uploadUrl:uploadUrl,
    fileMask:fileMask
});

然而，dojox.form.FileUploader现已弃用（即将弃用），并由dojo.form.uploader取代。在此我无法找到任何可以模仿filemast功能的属性。我读了official Dojo Uploader documenation但它没有提到任何关于文件掩码的内容。

有人遇到过这个问题吗？

Answer 1

dojox.form.Uploader临时生成一个DOM元素来处理文件上传操作。所以我们可以跟踪用dojo.aspect生成的DOM，如下所示：

var uploader = new Uploader({...}, ...);
aspect.after(uploader._inputs, "push", function(method, args) {
    args[0].accept = "image/jpg,image/jpeg,image/gif,image/png";
});

Answer 2

您可以按accept属性设置类型，并使用mime类型对其进行配置。

dojo.require("dojox.form.Uploader");

var tbl = document.getElementById('hola');
var fileInput = document.createElement('input');
fileInput.type = 'file'; //fallback

fileInput.setAttribute("data-dojo-type", "dojox.form.Uploader");
fileInput.setAttribute('accept', 'image/jpeg');
fileInput.setAttribute('data-dojo-props', 'name:"uploadedfile", label:"Select Some Files"');
tbl.appendChild(fileInput);

div {
  border: 1px;
  border-style: dashed;
}

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script src="http://amd.egoworx.com/jsfiddle-dojo-require.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" rel="stylesheet" />
<div id="hola"></div>

Answer 3

或覆盖Uploader._createInput 只需添加一行：

accept : ".xls,.xlsx,.xlsm,.csv" // Just add the line

像这样

_createInput: function(){
alert("_createInput 1");
if(this._inputs.length){
domStyle.set(this.inputNode, {
top:"500px"
});
this._disconnectButton();
this._nameIndex++;
}
alert("_createInput 2");
var name = this._getFileFieldName();
alert("_createInput 3");
// reset focusNode to the inputNode, so when the button is clicked,
// the focus is properly moved to the input element
alert("_createInput 4");
this.focusNode = this.inputNode = domConstruct.create("input", {type:"file", name:name, "aria-labelledby":this.id+"_label",
accept : ".xls,.xlsx,.xlsm,.csv" // Just add the line
}, this.domNode, "first");
alert("_createInput 5");
if(this.supports("multiple") && this.multiple){
domAttr.set(this.inputNode, "multiple", true);
}
alert("_createInput 6");
this._inputs.push(this.inputNode);

alert("_createInput 7");
domStyle.set(this.inputNode, {
position:"absolute",
fontSize:this.inputNodeFontSize+"em",
top:"-3px",
right:"-3px",
opacity:0
});
alert("_createInput 8");
this._connectButton();
alert("_createInput 9");
},

使用新的dojo Uploader的Filemask

3 个答案: