2012-07-26 162 views
0

我试图用nicupload插件实现nicEdit,但是当我选择一个文件上传它说“无法上传图像”,并且服务器响应说“无效上传ID”。nicUpload说“无效的上传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),这是所有,但我不断收到错误。有任何想法吗?

回答

1

您可以手动向脚本传递一个id:例如nicUpload.php?id = introPicHeader,它将成为您定义的images文件夹中的introPicHeader.jpg(或适当的扩展名)。

但是,我注意到,如果nicEditorAdvancedButton.extend期间直接在nicEdit.js中指定,则此脚本已损坏,无法访问配置选项uploadURI({这会导致访问相对路径的“未知”资源,导致错误

该文档意味着否则,nicurI在这里指定imgur.com(也许作为默认值)的事实给了我一个印象,我也可以在一个地方添加一个uploadURI引用到nicUpload.php脚本而不是每个编辑器实例。

更新

如果您在实例化过程中通过它,我认为这可以实现简单的动态ID群体。

不幸的是,nicUpload.php充满了错误,它的输出不是JSON。编辑器期望解析JSON并找到脚本标记和意外标记“<”的错误。

有其他错误的木筏,我将尝试确定:

在nicEdit.js

  1. A.append( “图像”)应该是INFACT A.append( “nicImage” )
  2. this.onUploaded(D.upload)should this 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($状态)。
  2. JSON输出需要返回一个名为links而不是url的键/值对,尽管在nicEdit.js中将var D = B.links重命名为var D = B.url也足以作为修正。

php和javascript代码都有很多不足之处,我经常遇到很多错误,并且自己修复了这些错误。

2

长时间寻找解决方案后(很多帖子没有真正的解决方案),我现在自己修复了代码。我现在可以将图像上传到我自己的服务器上。 Thx萤火虫和日食;-)

主要问题是,nicUpload.php是旧的,不与当前nicEdit上传功能。

缺少的是错误处理,随意添加此...

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 <[email protected]> 
* @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]; 
} 

?> 
+0

的最佳解决方案,谢谢!有一件事 - 在JavaScript文件中无处不在需要将'options.image.width'更改为'options.width'。 – Piero 2014-03-07 19:19:33