当前位置：文江博客话题详情

为什么jquery表单插件与fckeditor & 冲突文件上传？

发布于 2025-01-07 13:30:14 字数 299 浏览 4 评论 0原文

我创建了一个包含 FCKEditor + 文件输入框的表单，并且使用下面 jquery 表单插件提供的 ajaxSubmit() 方法提交表单。

http://jquery.malsup.com/form/

如果我不使用文件输入框， FCKEditor 值正确提交，但如果我在表单中添加文件输入框，FCKEditor 的更新内容不会被存储。它仅存储旧值。有什么建议吗？谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笨笨の傻瓜 2025-01-14 13:30:14

我遇到了同样的问题，这似乎是因为将处理程序附加到文件上传表单的 javascript 函数与页面 $('form') 中的所有表单匹配，其中包括封装 CKEditor 的表单。

您可以通过在上传表单中添加一个 id 字段并在附加事件处理程序时定位该特定 id 来解决此问题，这样 CKEditor 就不会受到影响。

例如

 <form action="upload.php" method="post" enctype="multipart/form-data" id="upload_image_form">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload image to Server">
</form>
<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>
<div id="status"></div>
$(document).ready(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form#upload_image_form').ajaxForm({
    beforeSend: function() {
    status.empty();
     var percentVal = '0%';
    bar.width(percentVal)
    percent.html(percentVal);
        },
    uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    bar.width(percentVal)
     percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
        percent.html('100%');
        bar.width('100%')
    }
});
});

I had the same problem, it appears to be because the javascript function that attaches the handler to the file upload form is matching all forms in the page $('form') which includes the form that encapsulates the CKEditor.

You can solve this by adding an id field to your upload form and targeting that specific id when you attach the event handler so CKEditor is not affected.

e.g.

 <form action="upload.php" method="post" enctype="multipart/form-data" id="upload_image_form">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload image to Server">
</form>
<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>
<div id="status"></div>
$(document).ready(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form#upload_image_form').ajaxForm({
    beforeSend: function() {
    status.empty();
     var percentVal = '0%';
    bar.width(percentVal)
    percent.html(percentVal);
        },
    uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    bar.width(percentVal)
     percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
        percent.html('100%');
        bar.width('100%')
    }
});
});

回复收藏 0 原文

~没有更多了~