0

nicuploadプラグインを使用してnicEditを実装しようとしていますが、アップロードするファイルを選択すると、「画像のアップロードに失敗しました」と表示され、サーバーの応答に「無効なアップロードID」と表示されます。

これは、スクリプトを呼び出して初期化するコードです。

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
bkLib.onDomLoaded(function() {
new nicEditor({uploadURI : '../../nicedit/nicUpload.php'}).panelInstance('area1');
});
//]]>
</script>

nicUpload.phpへのパスは正しく、コードはドキュメントに記載されているものです:http: //nicedit.com/src/nicUpload/nicUpload.js

アップロードフォルダを変更し、書き込み権限を設定しました。ドキュメント( http://wiki.nicedit.com/w/page/515/Configuration%20Options )によると、それだけですが、エラーが発生し続けます。何か案は?

4

2 に答える 2

2

長い間解決策を探した後(実際の解決策のない多くの投稿)、私は今自分でコードを修正しました。これで、自分のサーバーに画像をアップロードできるようになりました。ファイアバグと日食へのThx;-)

主な問題は、nicUpload.phpが古く、現在のnicEdit-Upload関数で機能しないことです。

欠落しているのはエラー処理です。これを自由に追加してください...

nicEditorをphpファイルに追加し、 nicEdit.phpを使用するように構成します。

new nicEditor({iconsPath : 'pics/nicEditorIcons.gif', uploadURI : 'script/nicUpload.php'}

nicEdit.jsを非圧縮でダウンロードし、 nicEdit.jsの次の行を変更します。

uploadFile : function() {
var file = this.fileInput.files[0];
if (!file || !file.type.match(/image.*/)) {
  this.onError("Only image files can be uploaded");
  return;
}
this.fileInput.setStyle({ display: 'none' });
this.setProgress(0);

var fd = new FormData(); 
fd.append("image", file);
fd.append("key", "b7ea18a4ecbda8e92203fa4968d10660");
var xhr = new XMLHttpRequest();
xhr.open("POST", this.ne.options.uploadURI || this.nicURI);

xhr.onload = function() {
  try {
    var res = JSON.parse(xhr.responseText);
  } catch(e) {
    return this.onError();
  }
  //this.onUploaded(res.upload); // CHANGE HERE
  this.onUploaded(res);
}.closure(this);
xhr.onerror = this.onError.closure(this);
xhr.upload.onprogress = function(e) {
  this.setProgress(e.loaded / e.total);
}.closure(this);
xhr.send(fd);

}、

onUploaded : function(options) {
this.removePane();
//var src = options.links.original; // CHANGE HERE
var src = options['url'];
if(!this.im) {
  this.ne.selectedInstance.restoreRng();
  //var tmp = 'javascript:nicImTemp();';
  this.ne.nicCommand("insertImage", src);
  this.im = this.findElm('IMG','src', src);
}
var w = parseInt(this.ne.selectedInstance.elm.getStyle('width'));
if(this.im) {
  this.im.setAttributes({
    src : src,
    width : (w && options.image.width) ? Math.min(w, options.image.width) : ''
  });
}

}

このようにnicUpload.phpを変更します

<?php
/* NicEdit - Micro Inline WYSIWYG
 * Copyright 2007-2009 Brian Kirchoff
 *
 * NicEdit is distributed under the terms of the MIT license
 * For more information visit http://nicedit.com/
 * Do not remove this copyright message
 *
 * nicUpload Reciever Script PHP Edition
 * @description: Save images uploaded for a users computer to a directory, and
 * return the URL of the image to the client for use in nicEdit
 * @author: Brian Kirchoff <briankircho@gmail.com>
 * @sponsored by: DotConcepts (http://www.dotconcepts.net)
 * @version: 0.9.0
 */

/* 
* @author: Christoph Pahre
* @version: 0.1
* @description: different modification, so that this php file is working with the newest nicEdit.js (needs also modification - @see) 
* @see http://stackoverflow.com/questions/11677128/nicupload-says-invalid-upload-id-cant-make-it-works
*/

define('NICUPLOAD_PATH', '../images/uploadedImages'); // Set the path (relative or absolute) to
                                      // the directory to save image files

define('NICUPLOAD_URI', '../images/uploadedImages');   // Set the URL (relative or absolute) to
                                      // the directory defined above

$nicupload_allowed_extensions = array('jpg','jpeg','png','gif','bmp');

if(!function_exists('json_encode')) {
    die('{"error" : "Image upload host does not have the required dependicies (json_encode/decode)"}');
}

if($_SERVER['REQUEST_METHOD']=='POST') { // Upload is complete

    $file = $_FILES['image'];
    $image = $file['tmp_name'];
    $id = $file['name'];

    $max_upload_size = ini_max_upload_size();
    if(!$file) {
        nicupload_error('Must be less than '.bytes_to_readable($max_upload_size));
    }

    $ext = strtolower(substr(strrchr($file['name'], '.'), 1));
    @$size = getimagesize($image);
    if(!$size || !in_array($ext, $nicupload_allowed_extensions)) {
        nicupload_error('Invalid image file, must be a valid image less than '.bytes_to_readable($max_upload_size));
    }

    $filename = $id;
    $path = NICUPLOAD_PATH.'/'.$filename;

    if(!move_uploaded_file($image, $path)) {
        nicupload_error('Server error, failed to move file');
    }

    $status = array();
    $status['done'] = 1;
    $status['width'] = $size[0];
    $rp = realpath($path);
    $status['url'] =  NICUPLOAD_URI ."/".$id;


    nicupload_output($status, false);
    exit;
} 

// UTILITY FUNCTIONS

function nicupload_error($msg) {
    echo nicupload_output(array('error' => $msg)); 
}

function nicupload_output($status, $showLoadingMsg = false) {
    $script = json_encode($status);
    $script = str_replace("\\/", '/', $script);
    echo $script;

    exit;
}

function ini_max_upload_size() {
    $post_size = ini_get('post_max_size');
    $upload_size = ini_get('upload_max_filesize');
    if(!$post_size) $post_size = '8M';
    if(!$upload_size) $upload_size = '2M';

    return min( ini_bytes_from_string($post_size), ini_bytes_from_string($upload_size) );
}

function ini_bytes_from_string($val) {
    $val = trim($val);
    $last = strtolower($val[strlen($val)-1]);
    switch($last) {
        // The 'G' modifier is available since PHP 5.1.0
        case 'g':
            $val *= 1024;
        case 'm':
            $val *= 1024;
        case 'k':
            $val *= 1024;
    }
    return $val;
}

function bytes_to_readable( $bytes ) {
    if ($bytes<=0)
        return '0 Byte';

    $convention=1000; //[1000->10^x|1024->2^x]
    $s=array('B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB');
    $e=floor(log($bytes,$convention));
    return round($bytes/pow($convention,$e),2).' '.$s[$e];
}

?>
于 2013-04-27T12:22:28.290 に答える
1

スクリプトにIDを手動で渡すことができます(例:nicUpload.php?id = introPicHeader)。これは、定義した画像フォルダーでintroPicHeader.jpg(または適切な拡張子)になります。

ただし、nicEditorAdvancedButton.extend({の間にnicEdit.jsで直接指定すると、このスクリプトが壊れており、構成オプションuploadURIにアクセスできないことに気付きました。これにより、比較的パスされた「不明な」リソースにアクセスし、エラーが発生します。

ドキュメントは別のことを暗示しており、ここでnicURIがimgur.comに指定されているという事実(おそらくデフォルトとして)は、すべてのエディターのインスタンス化ではなく、単一の場所でnicUpload.phpスクリプトへのuploadURI参照を追加できるという印象を与えました。

アップデート

これは、インスタンス化中に渡すと機能します。これにより、動的なIDの入力が簡単になります。

残念ながら、nicUpload.phpにはエラーがたくさんあり、その出力はJSONではありません。エディターはJSONを解析することを期待しており、予期しないトークン「<」を含むスクリプトタグとエラーを検出します。

私が特定しようとする他のエラーがたくさんあります:

nicEdit.jsで

  1. A.append( "image")は実際にはA.append( "nicImage")である必要があります
  2. this.onUploaded(D.upload)はthis.onUploaded(D)になります
  3. this.onUploaded(D)は、変数スコープの問題を修正するために、var D = JSON.parse(C.responseText)の後にtryブロック内に移動する必要があります
  4. B.image.widthはB.widthになる必要があります

nicUpload.phpで

  1. JSON出力が正しく形成されていません。html出力をコメントアウトして、json_encode($ status)だけを出力してください。
  2. JSON出力は、urlではなくlinksという名前のキーと値のペアを返す必要がありますが、nicEdit.jsでvar D=B.linksの名前をvarD=B.urlに変更することも修正として十分です。

phpとjavascriptの両方のコードには、まだまだ多くの要望があります。定期的に多くのエラーが発生し、自分で修正しています。

于 2012-07-27T11:54:40.247 に答える