반응형
Jquery 창송신_송신처
좋은 제목이 생각나지 않네요.
내장 WordPress 미디어 업로더를 사용하여 여러 이미지를 업로드할 수 있는 WordPress를 내장하고 있습니다.동작은 업로드 후 "insert"를 선택하면 jQuery가 ID가 포함된 텍스트 필드에 이미지 경로를 삽입합니다.저장하면 텍스트 필드가 옵션 테이블에 저장됩니다.
업로드 필드가 1개뿐인 경우 완벽하게 작동합니다.업로드를 추가하면 모든 업로드 필드가 동일한 이미지 경로로 저장됩니다.각 업로드 버튼만 있으면 관련 텍스트 필드의 값만 삽입할 수 있습니다.
.를 하나씩 사용하려고 했는데 제대로 작동하지 않아요.값 삽입에 .attr('id')를 사용해보았지만 아무것도 실행되지 않았습니다.
여기 jQuery와 마크업이 있습니다.
jQuery('.upload-button').click(function() {
formfield = jQuery('.upload').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('.upload').val(imgurl);
tb_remove();
};
<div class="upload_field"
<input type="text" name="upload_one" id="upload_one" class="upload" value="" />
<input type="button" class="upload-button" value="Upload Image" />
</div>
<div class="upload_field"
<input type="text" name="upload_two" id="upload_two" class="upload" value="" />
<input type="button" class="upload-button" value="Upload Image" />
</div>
<div class="upload_field"
<input type="text" name="upload_three" id="upload_three" class="upload" value="" />
<input type="button" class="upload-button" value="Upload Image" />
</div>
상세한 것에 대하여는, 사용하고 있는 업로더의 설정을 다음에 나타냅니다.http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/
어떤 도움도 언제나 감사하게 생각합니다.
값이 삽입되는 입력 필드를 지정할 수 있어야 합니다.
var uploadID = ''; /*setup the var*/
jQuery('.upload-button').click(function() {
uploadID = jQuery(this).prev('input'); /*grab the specific input*/
formfield = jQuery('.upload').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
uploadID.val(imgurl); /*assign the value to the input*/
tb_remove();
};
에디터에서도 다른 기능이 동작하도록 하기 위해 사용합니다.또한 이미지를 삽입하고 싶은 입력 필드의 ID를 전달합니다.
<?php
function customPostTypeUploader() {
if(isset($_GET["post_type"])) {
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var uploadID = '';
var storeSendToEditor = '';
var newSendToEditor = '';
jQuery(document).ready(function() {
storeSendToEditor = window.send_to_editor;
newSendToEditor = function(html) {
imgurl = jQuery('img',html).attr('src');
$("#" + uploadID.name).val(imgurl);
tb_remove();
window.send_to_editor = storeSendToEditor;
};
});
function Uploader(id) {
window.send_to_editor = newSendToEditor;
uploadID = id;
formfield = jQuery('.upload').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
}
</script>
<?php
}
}
add_action("admin_head", "customPostTypeUploader");
?>
그런 다음 메타 상자에 있는 양식의 입력 필드를 다음과 같이 사용하십시오.
<input type="text" id="image_1" name="uploaded_image_1" value="" size="40" />
<input type="button" onclick="Uploader(image_1);" title="Upload image" class="upload-button" id="add_image" value="Browse..."/>
이러한 솔루션의 문제는 이미지를 투고하는 기능이 오버라이드되어 투고에 삽입할 수 없다는 것입니다.위 코드를 수정하여 편집기를 통해 이미지를 포스트 콘텐츠에 삽입할 수 있습니다.
jQuery(document).ready(function() {
var orig_send_to_editor = window.send_to_editor;
jQuery('.upload_image_button').click(function() {
formfield = jQuery(this).prev('input');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
var regex = /src="(.+?)"/;
var rslt =html.match(regex);
var imgurl = rslt[1];
formfield.val(imgurl);
tb_remove();
jQuery('#show_'+formfield.attr('name')).html('<img src="'+imgurl+'" width="150" />')
window.send_to_editor = orig_send_to_editor;
}
return false;
});
});
주요 차이점은 이 코드가 원래 함수를 저장하고 send_to_editor에 다시 할당한다는 것입니다.
예를 들어 다음과 같이 사용할 수 있는HTML을 참조해 주세요.
<input type="hidden" name="image_1" />
<?php $post_img = get_post_meta($post->ID,'item_image',true); ?>
<input class="upload_image_button" type="button" value="<?php echo (empty($post_img)?'Upload Image':'Change Image') ?>" />
<div id="show_image_1"><?php echo (!empty($post_img)?"<img src='$post_img' width='100' />":'')?></div>
이 예에서는 창을 복원합니다.send_to_func() func는 tb_func 이벤트를 위에서 설명한 소주로 바인드합니다.
var targetfield = '';
var orig_send_to_editor = window.send_to_editor;
jQuery('.fwb_uploadbtn').click(function() {
targetfield = jQuery(this).prev('.fwb_uploadimg');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
//restore send_to_editor() when tb closed
jQuery("#TB_window").bind('tb_unload', function () {
window.send_to_editor = orig_send_to_editor;
});
//temporarily redefine send_to_editor()
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery(targetfield).val(imgurl);
tb_remove();
}
return false;
});
제 연주는 다음과 같습니다.
또한 img src를 확인하고 없는 경우 문서에서 href를 시도하여 SRC 속성 없이 PDF 파일 또는 기타 파일을 삽입할 수 있습니다.또한 클래스를 사용하여 여러 항목에 적용할 수 있습니다.
Javascript:
var formfield = "";
jQuery('.browse_upload').click(function() {
formfield = jQuery(this).attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
hrefurl = jQuery('img',html).attr('src');
if(jQuery(hrefurl).length == 0) {
hrefurl = jQuery(html).attr('href'); // We do this to get Links like PDF's
}
jQuery('.' + formfield).val(hrefurl);
tb_remove();
}
HTML 샘플
<input id="option[unique-option]" class="regular-text unique-option" type="text" name="option[unique-option]" value="<?php esc_attr_e( $options['unique-option'] ); ?>" />
<button class="browse_upload button-secondary" name="unique-option" type="button">Browse</button>
확실히 해결하기 어려운 문제이며, 문서화가 잘 되어 있지 않지만, 커스텀 포스트 타입에 따라 사용이 증가하고 있다고 생각합니다.나는 폴 길레스피의 코드를 조금 개선했다.
var up = null;
jQuery(document).ready(function() {
up = new Uploader();
});
function Uploader() {
this.storeSendToEditor = window.send_to_editor;
this.uploadID = null;
this.imgID = null;
}
Uploader.prototype.newSendToEditor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery("#" + this.up.uploadID).val(imgurl);
if(typeof(this.up.uploadFunc) == "function")
this.up.uploadFunc(html, imgurl, this.up.uploadID);
tb_remove();
this.up.uploadID = '';
window.send_to_editor = this.up.storeSendToEditor;
};
Uploader.prototype.upload = function(id,func){
window.send_to_editor = this.newSendToEditor;
this.uploadID = id;
this.uploadFunc = func;
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
}
그런 다음 데이터베이스의 입력 필드를 업데이트하는 것 이상을 수행할 경우 사용자 지정 함수를 정의하여 사용합니다.저로서는 업로드 전에 랩퍼 div에 이미지를 표시하고 싶습니다.
var uploadFunc = function(html, imgurl, uploadID){
// Do whatever you want.
};
그리고 거의 전과 같이 부르세요.
<input type="text" id="image_1" name="uploaded_image_1" value="" size="40" />
<input type="button" onclick="up.upload("image_1",uploadFunc);" title="Upload image" class="upload-button" id="add_image" value="Browse..."/>
누가 유용하게 써주길 바래!
이것은 조금 오래된 주제일 수도 있지만, 당신의 해결책을 따라 내 플러그인을 작동시켰습니다.위의 코드 중 어느 것도 제 솔루션에 완전히 작동하지 않았지만, 그것들을 조합하여 작동했습니다.업로드 필드 2개, 동영상 파일 및 기타 이미지 수용 필드 1개가 필요했고, 편집 후 화면에 이미지 및 동영상을 올릴 수 있어야 했습니다.
jQuery(document).ready(function() {
var orig_send_to_editor = window.send_to_editor;
jQuery('.upload_image_button').click(function() {
formfield = jQuery(this).prev('input');
tb_show('Add Media', 'media-upload.php?type=file&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
if(jQuery(imgurl).length == 0) {
imgurl = jQuery(html).attr('href'); // We do this to get Links like PDF's
}
formfield.val(imgurl);
tb_remove();
jQuery('#'+formfield.attr('name')).val(imgurl);
window.send_to_editor = orig_send_to_editor;
}
return false;
});
});
업로드 필드는 다음과 같습니다.
<tr>
<td>
<label for="image_1">Upload Thumbnail</label><br>
<input type="text" name="image_1" id="image_1" value="" size="60" />
<input class="upload_image_button button" type="button" value="Upload Thumbnail" />
<br>
You can also upload thumb from your PC using WordPress media manager(supported files are: .bmp, .BMP, .jpg, .JPG, .png, .PNG, jpeg, JPEG, .gif, .GIF).
</td>
</tr>
<tr>
<td>
<label for="video_1">Upload Video</label><br>
<input type="text" name="video_1" id="video_1" value="" size="60" />
<input class="upload_image_button button" type="button" value="Upload Video" />
<br>
You can also upload video to stream directly from your website, using WordPress media manager(supported files are: .mp4, .MP4, .flv, .FLV, .f4v, .F4V).
</td>
</tr>
이렇게 하면 썸네일 필드와 영상필드가 있는 영상을 업로드 할 수 있고, 포스트 편집 화면에서도 다양한 이미지나 갤러리를 추가할 수 있습니다.
나중에 php에서 적절한 확장자가 적절한 업로드 필드에 있는지 확인하고, 그렇지 않은 경우 필드를 비워 둡니다.
당신의 답변이 나에게 유용하고 도움이 되었기 때문에 어떤 사람들은 이것을 유용하게 여길지도 모릅니다.
제 해결책은 이렇습니다.이를 통해 문서 이미지, PDF 등을 업로드할 수 있으며 텍스트 에디터와 관련된 경합 문제가 해결됩니다.
var uploadID = ''; // setup the var in a global scope
var original_send_to_editor = window.send_to_editor;
jQuery('.upload-button').click(function() {
uploadID = jQuery(this).prev('input'); // set the uploadID variable to the value of the input before the upload button
formfield = jQuery('.upload').attr('name');
tb_show('', 'media-upload.php?TB_iframe=true');
uploadBAR(); // Call if needed
return false;
});
function uploadBAR() {
window.send_to_editor = function(html) {
imgurl = jQuery(html).attr('href');
uploadID.val(imgurl); /*assign the value of the image src to the input*/
tb_remove();
window.send_to_editor = original_send_to_editor;//restore old send to editor function
};
}
오디오 업로드에 사용했습니다.
jQuery(document).ready(function($) {
$('#upload_button').click(function() {
tb_show('Upload a Podcast MP3 file', 'media-upload.php?referer=my-settings&type=audio&TB_iframe=true&post_id=0', false);
return false;
});
window.send_to_editor = function(html) {
console.log(html);
var file_url = $($.parseHTML(html)).attr('href');
console.log(file_url);
$('#my_input_field').val(file_url);
tb_remove();
}
});
언급URL : https://stackoverflow.com/questions/5671550/jquery-window-send-to-editor
반응형
'programing' 카테고리의 다른 글
| 'React'는 UMD 글로벌을 나타내지만 현재 파일은 모듈입니다. (0) | 2023.03.05 |
|---|---|
| WebAPI 또는 MVC를 사용하여 ASP에서 JSON을 반환한다.그물 (0) | 2023.03.05 |
| 스프링 부트:application.properties에 대시가 있는 환경변수는 어떻게 지정합니까? (0) | 2023.03.05 |
| 재담을 사용하여 모듈을 조롱하고 함수 호출을 테스트할 수 없습니다. (0) | 2023.02.28 |
| react.createContext 포인트 of defaultValue? (0) | 2023.02.28 |