如何重新显示我在输入中新添加的图片链接？

Posted 2023-03-05

【中文标题】如何重新显示我在输入中新添加的图片链接？

【英文标题】：How to redisplay a picture link that I newly add it in an input?

【发布时间】：2017-01-09 02:49:02

【问题描述】：

我有一个表单可以使用 ajax 查询将数据保存在数据库中

$.ajax(
    type: "POST",
    url: " path('element_content_save', 'id': '__ID__')".replace('__ID__', elementId),
    data: postData,
    beforeSend: function() 
        NProgress.start();
    
).done(function(r) 
    $('#web-elements').show();
    $('#content-editor').hide();

    if(isCustom)
        if(typeof(elementIdentifier) != 'undefined')
            var html = $('#frame')[0].contentWindow.getHtmlElement(elementIdentifier).html;
            $.ajax(
                type: "POST",
                url: " path('element_save_configurable','id':'__ID__') ".replace('__ID__', elementIdentifier),
                data: html: html,
                beforeSend: function () 
                    NProgress.start();
                
            ).done(function (r) 
                $('#frame')[0].contentWindow.refreshElementByContentId(elementId);
                NProgress.done();
            );
         else 
            $('#frame')[0].contentWindow.refreshElementByContentId(elementId);
        
    
    NProgress.done();
);

在这个表单中，我输入了id='image-link-input'，它是一个图片链接。当我点击保存一切正常时，如果我想重新编辑我放在首位的那个链接，我希望它出现，这样我就可以知道我已经放入了什么。

【问题讨论】：

您可能应该放一些屏幕截图以及您的表单 HTML，以便我们了解更多细节并能够提出更好的答案

嗨 shariqkhan 感谢回复，我会提供更多细节，当我保存链接或图片时，服务器中的 href 值提示空白，但我想立即更改 href 值甚至在数据库之前先将其存储在网络中。这可能吗？

您可以发布此代码所在页面的网址吗？如果您在本地服务器上执行此操作，请放置表单的屏幕截图。还有更多代码——HTML 表单和包含 AJAX 调用的完整函数

我也没有明白你所说的“我想立即更改 href 值并将其存储在网络中”的意思。你想在哪里看到href的变化？ :store it in web" 是什么意思？

我不知道如何插入屏幕截图，但我会解释一下，我的意思是更改 href ：将其值从 href=" " 更改为 href="mylink.com" 例如这必须在浏览器中立即显示（当我点击保存时，我必须拥有新值）而不从数据库中检索它（这需要更多时间才能出现）

【参考方案1】：

好的，据我了解，您的用例是这样的： 1. 用户在“图片”字段中上传图片 2. 用户在标题为“Liens vers URL”的输入框中输入一个 url 3. 用户单击“保存”，然后链接与图像关联，这样当有人单击图像时，他/她将被重定向到保存在标题为“Liens vers URL”的字段中的链接。 4. 这被保存在数据库中。但由于这是 AJAX 调用，这需要一些时间，您希望图像立即链接到表单上的 url。

如果这一切都正确，那么请看下面的代码 sn-p。

我在这里做的是从文本框中捕获 imagePath，然后将其设置为锚链接。

jQuery(document).ready(function() 
	jQuery('#saveImage').click(function() 
		var imgPath = jQuery('#image-link-input').val();
		var imgDest = jQuery('#image-destination').val();
		

		var imgElement = '<a href="' + imgDest + '">' + '<img src="' + imgPath + '">' + '</a>';

		jQuery('#imageholder').html(imgElement);
		jQuery('#imageControls').append('<p class="success">Success!!. Now Click on the image to be redirected to the link</p>');
	);
);

#imageholder 
  background:url(http://www.gavaghan.ca/wp-content/uploads/2014/09/placeholder-300x200.png);
  width:300px;
  height:200px;
  margin-bottom:30px;

.success 
  margin-top:20px;
  border:2px solid green;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageholder">
    <img id="blah" src="http://www.gavaghan.ca/wp-content/uploads/2014/09/placeholder-300x200.png"  />
</div>


<div id="imageControls">
	<p>
		Enter the path of an image in the text box below. <em> eg. http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg </em>
	</p>
	<input type="text" id="image-link-input"/>
	<p>
		Enter the url where the image should redirect.  <em> eg. www.rediff.com</em>
	</p>
	<input type="text" id="image-destination"/>
	<button id="saveImage">Save</button>
</div>