Question

我有一个我正在处理的网络应用程序。它的一个方面支持发送消息。最近我决定用户需要能够在他们的消息中发送文件。

TMI可能，但是......我有一个隐藏的输入类型=文件，当用户点击图像图标时我触发了触发器。用户获取本地文件浏览器对话框，一旦选择了文件，我通过ajax传递文件数据，存储文件并在内容可编辑div中生成链接。这一切都很好。

这里有一个问题：生成的锚点有title =＆＃39;＆＃39;然后在JQuery中我想说：

$('id').tooltip({content: '<img src="" />'})

我想让它工作，所以当用户将鼠标悬停在主播上时，会显示上传图片的缩略图，但我不确定如何放置＆＃39;生成的jquery出在我的脚本中使用。这看起来很傻，但我无法理解它。

这里有一些代码：

关闭本地文件浏览对话框后，我会捕获事件/抓取数据，如下所示：

$('#file').on('change', function() {
            file_upload = $(this)[0].files[0];
            var data = new FormData();
            data.append('function', 'file_upload');
            data.append('file_upload', file_upload);
            $.ajax({
                    url: 'ajax_send_message.php',
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function(data) {
                            if (data) {
                                    alert(data);
                            }
                    }
            });     
            var image_path = "path/to/file/<?=$member_id?>/"+file_upload.name;
            var image = "<a id='"+file_upload.name+"' href='"+image_path+"' title=''>Edit this text</a>";
            var body = $('#msg_body').html();
            body += image;
            $('#msg_body').html(body);
            $( "#"+file_upload.name+"" ).tooltip({ content: '<img src="'+image_path+'" />' });
    });

具体来说，我不确定如何将这只小狗带出野外或将它绑在某物上

$( "#"+file_upload.name+"" ).tooltip({ content: '<img src="'+image_path+'" />' });

提前感谢您的帮助！

Answer 1

好的，所以这里是我提出的解决方案，对我有用。

首先，我调整了我发布的原始代码，使其在前端看起来更干净。而是处理php中的所有路径。

$('#file').on('change', function() {
            file_upload = $(this)[0].files[0];
            var data = new FormData();
            data.append('function', 'file_upload');
            data.append('file_upload', file_upload);
            data.append('msg_body', $('#msg_body').html());
            $.ajax({
                    url: 'ajax_send_message.php',
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function(data) {
                            if (data) {
                                    $('#msg_body').html(data);
                            }
                    }
            });     
    });

所以在php中我建立html就像这样：

  $anchor_builder = "<a id='{$no_spaces}' href='{$image_path}'>
                     Edit this text
                     </a>";

  $msg_body .= "&nbsp;".$anchor_builder;

然后再次在JQuery中，我添加了一个工具提示函数，如下所示：

$(function() {
            $( document ).tooltip({
                    items: 'a, img, [title]',
                    tooltipClass: 'tooltip_font_size',
                    show: {
                            delay: 2000
                    },
                    content: function() {
                            var element = $( this );
                            if ( element.is( 'a' ) ) {
                                    var path = element.attr('href')
                                    return '<img src="'+path+'" />'
                            }
                            if ( element.is( '[title]' ) ) {
                                    return element.attr( 'title' );
                            }
                    }
            });
});

现在我的工作量增加了100％。我只需要计算宽度和高度。

在事件触发时通过生成的HTML生成JQuery引用

1 个答案: