1, since the input type = "file" relatively ugly default property, so we have to hide the input tag, here is the positioning.
2, through class = "enclosure-text" the P tag to store the file name after we uploaded
3, the input is hidden, so we have to add a button to upload and add the click event to trigger input click event
HTML:
<div class="comment-right-float">
<p class="enclosure-text"></p>
<span class="btn-up-file" onclick="$('#file-input').click()">上传</span>
<form action="/ueditor/upload" method="post" id="submitFile"> <!-action为后台给的接口路径->
<input type="file" id="file-input" name="file-att" style="visibility: hidden;display: inline-block;width: 2px;position: fixed;left: -1000px;" accept=".doc,.pdf,.docx" />
</form>
<span class="file-tip">支持doc/docx/pdf等格式</span> </ div>
attachment can not be null </ P><p class = "warning-manage
JS:
// Select attachment upload
var fileUrl; // needs url, when saving the background This address
var saveFileName; // uploaded taken after the file name
. $ ( '# File-INPUT') Change (function () {
/ / is determined whether the file name is empty, no file name is taken when the empty
iF ($ (the this) .val () == '') {
return to false;
} the else {
saveFileName = $ (the this) .val () Slice. (12 is);
. $ (. "Enclosure-text") text (saveFileName);
}
. $ ( '# submitFile') ajaxSubmit ({
type: 'POST',
dataType: 'JSON',
Success: function (Result) {
after a successful background // request will return a URL address, which is required to submit to the background when you last saved.
file specified by fileurl = result.url;
// and empty the original file, or select the same file can not be passed again
// $ ( ' # file-input '). h ( ');
},
Error: function () {
// and clears the original document, or re-select the same document can not pass
// $ ( '# File-INPUT') Val ( '');.
}
});
})