h5上传图片

最新推荐文章于 2025-07-08 10:24:35 发布

protossrr

最新推荐文章于 2025-07-08 10:24:35 发布

阅读量884

点赞数

分类专栏： javascript

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种基于 HTML5 的图片上传实现方法，详细解释了如何通过 JavaScript 和 FileReader API 来选择、预览并上传图片。此外还涉及了如何在用户选择文件后触发上传流程，并处理上传过程中的各种事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// ---------- 构建上传对象 ----------
var upfile = new E.UploadFile({
editor: editor,
uploadUrl: uploadImgUrl,
timeout: uploadTimeout,
fileAccept: 'image/jpg,image/jpeg,image/png' // 只允许选择图片

});

// 选择本地文件，上传
$uploadIcon.click(function (e) {
event = e;
upfile.selectFiles();
});

// 选择，继续渲染
UploadFile.fn.selectFiles = function () {
var self = this;

E.log('使用 html5 方式上传');

// 先渲染
self.render();

// 选择
E.log('选择文件');
self.$input.click();
};

// 渲染一个input标签用于上传图片
UploadFile.fn.render = function () {
var self = this;
if (self._hasRender) {
// 不要重复渲染
return;
}

E.log('渲染dom');

var fileAccept = self.fileAccept;
var acceptTpl = fileAccept ? 'accept="' + fileAccept + '"' : '';
var multiple = self.multiple;
var multipleTpl = multiple ? 'multiple="multiple"' : '';
var $input = $('<input type="file" ' + acceptTpl + ' ' + multipleTpl + '/>');
var $container = $('<div style="visibility:hidden;"></div>');

$container.append($input);
E.$body.append($container);

// onchange 事件
$input.on('change', function (e) {
self.selected(e, $input.get(0));
});

// 记录对象数据
self.$input = $input;

// 记录
self._hasRender = true;
};

// 选中文件之后，触发change，运行selected
UploadFile.fn.selected = function (e, input) {
var self = this;
var files = input.files || [];
if (files.length === 0) {
return;
}

E.log('选中 ' + files.length + ' 个文件');

// 遍历选中的文件，预览、上传
$.each(files, function (key, value) {
self.upload(value);
});
};

// clear 清空inputd
UploadFile.fn.clear = function () {
this.$input.val('');
E.log('input value 已清空');

// 上传单个文件
UploadFile.fn.upload = function (file) {
var self = this;
var editor = self.editor;
var filename = file.name || '';
var fileType = file.type || '';
var uploadImgFns = editor.config.uploadImgFns;
var uploadFileName = 'editorFile' || editor.config.uploadImgFileName || 'wangEditorH5File';
var onload = uploadImgFns.onload;
var ontimeout = uploadImgFns.ontimeout;
var onerror = uploadImgFns.onerror;
var reader = new FileReader();

if (!onload || !ontimeout || !onerror) {
E.error('请为编辑器配置上传图片的 onload ontimeout onerror 回调事件');
return;
}

E.log('开始执行 ' + filename + ' 文件的上传');

// 清空 input 数据
function clearInput() {
self.clear();
}

// onload事件
reader.onload = function (e) {
E.log('已读取' + filename + '文件');

var base64 = e.target.result || this.result;
editor.xhrUploadImg({
event: e,
filename: filename,
base64: base64,
fileType: fileType,
name: uploadFileName,
loadfn: function (resultText, xhr) {
clearInput();
// 执行配置中的方法
var editor = this;
onload.call(editor, resultText, xhr); //成功之后把图片插入到txt中，去掉
},
errorfn: function (xhr) {
clearInput();
if (E.isOnWebsite) {
alert('wangEditor官网暂时没有服务端，因此报错。实际项目中不会发生');
}
// 执行配置中的方法
var editor = this;
onerror.call(editor, xhr);
},
timeoutfn: function (xhr) {
clearInput();
if (E.isOnWebsite) {
alert('wangEditor官网暂时没有服务端，因此超时。实际项目中不会发生');
}
// 执行配置中的方法
var editor = this;
ontimeout(editor, xhr);
}
});
};