Skip to content
This repository has been archived by the owner on Sep 23, 2020. It is now read-only.

when has errors, dont show preview image,and notify dropify.fileReady… #45

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/js/dropify.js
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ Dropify.prototype.readFile = function(input)
image.onload = function() {
_this.setFileDimensions(this.width, this.height);
_this.validateImage();
_this.input.trigger(eventFileReady, [true, srcBase64]);
_this.input.trigger(eventFileReady, [_this.errorsEvent.errors.length === 0, srcBase64]);
};

}.bind(this);
Expand Down
58 changes: 58 additions & 0 deletions useage.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
html:

```html
<form id="avatarForm" class="change-avatar" enctype="multipart/form-data" action="${ctxPath}/home/profile/avatar" method="post">
<input
id="avatarFile"
name="avatar"
type="file" class="dropify"
class="dropify"
data-max-width="1024"
data-max-height="1024"
data-max-file-size="2M"
data-default-file="${ctxPath }/home/profile/avatar.png"
data-show-remove="false"
data-allowed-file-extensions="jpg png gif"
data-height="128"/>
<button type="button" id="avatarBtn" class="pure-button button-success">修改头像</button>
<p>从电脑中选择图片上传, 图像大小不要超过 2 MB,长宽不要超过 1024 px</p>
</form>
```



js:

```javascript
$('#avatarBtn').click(function() {
$("#avatarFile").trigger("click");
});
var drEvent = $('#avatarFile').dropify();
drEvent.on('dropify.fileReady', function(event, previewable, src){
if(previewable) {
// 提交表单
$(this).closest('form').submit();
} else {
dialog('图片格式有问题,请重新选择');
}
});

// 监听表单提交动作
$('#avatarForm').ajaxForm({
success: function(responseText, statusText) {
if (responseText === 'ok') {
tip('头像修改成功');
console.log($('#avatar-img'));
$('#avatar-img').attr('src','${ctxPath }/home/profile/avatar.png?'+Math.random());
} else {
dialog(responseText);
}
}
});
```



**注意:**

> 这里添加了`dropify.fileReady`作为回调事件,`previewable`代表是否可以预览,`false`代表出现了错误,所以不能预览,建议`previewable==false`时不要提交表单操作。