UEditor图片上传

这篇博客介绍了如何在网页中使用UEditor进行图片上传。它详细讲解了如何配置UEditor的Flash上传参数,包括设置上传文件的最大体积、最大数量、图片格式限制等,并提供了选择文件、文件超出限制、删除文件、开始上传、上传完成和上传失败等回调函数的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.引入一下js

<script type="text/javascript" src="tangram.js">

</script><script type="text/javascript" src="callbacks.js"></script>

/*-=-=-=-=-=-=-=全局变量模块-=-=-=-=-=-=-*/

var imageUrls = [], //从服务器返回的上传成功图片数组   

imageCount = 0; //预览框中的图片数量,初始为0//flash初始化参数

var flashOptions = {   

createOptions: {       

                           id: 'flashUpload', //flash容器id       

                           url: 'imageUploader.swf', //这个就是附件里面的FLASH       

                           width: '720', //容器宽度      

                           height: '272', //容器高度       

                           errorMessage: 'Flash插件初始化错误,请更新您的flashplayer版本!',

                          wmode: 'window', 

                          ver: '10.0.0',        // 初始化的参数就是这些,

                          vars: { 

                          width: 720, //width是flash的宽

                         height: 272, //height是flash的高

                         gridWidth: 115, // gridWidth是每一个预览图片所占的宽度,应该为width的整除 

                         gridHeight: 120, // gridHeight是每一个预览图片所占的高度,应该为height的整除

                         picWidth: 100, // 单张预览图片的宽度 

                         picHeight: 100, // 单张预览图片的高度 

                         uploadDataFieldName: 'picdata', // POST请求中图片数据的key 

                         picDescFieldName: 'pictitle', // POST请求中图片描述的key  

                         maxSize: 2, // 文件的最大体积,单位M 

                         compressSize: 1, // 上传前如果图片体积超过该值,会先压缩,单位M  

                         maxNum: 32, // 最大上传多少个文件

                         backgroundUrl: '', //背景图片,留空默认

                         listBackgroundUrl: '', //预览图背景,留空默认 

                         buttonUrl: '', //按钮背景,留空默认 

                         compressSide: 1, //等比压缩的基准,0为按照最长边,1为按照宽度,2为按照高度 

                         compressLength: 700, // 能接受的最大边长,超过该值Flash会自动等比压缩  

                         url: 'up.php', // 上传处理页面的url地址

                         ext: '{"param1":"参数值1", "param2":"参数值2"}', //可向服务器提交的自定义参数列表

                        fileType: '{"description":"图片", "extension":"*.gif;*.jpeg;*.png;*.jpg"}' //上传文件格式限制                             },

                        container: 'flashUploadContainer' //flash容器id,对应页面上面的DIV    },

                        selectFileCallback: 'selectFileCallback', // 选择文件的回调

                        exceedFileCallback: 'exceedFileCallback', // 文件超出限制的最大体积时的回调

                       deleteFileCallback: 'deleteFileCallback', // 删除文件的回调

                       startUploadCallback: 'startUploadCallback', // 开始上传某个文件时的回调

                        uploadCompleteCallback: 'uploadCompleteCallback', // 某个文件上传完成的回调

                        uploadErrorCallback: function (data) {     

                       if(!data.info){

                      alert(data.info);

                       } 

                       }, // 某个文件上传失败的回调

                      allCompleteCallback: 'allCompleteCallback' // 全部上传完成时的回调 

                      //changeFlashHeight: 'changeFlashHeight' 

                       // 改变Flash的高度,mode==1的时候才有用}

                      var flashObj = new baidu.flash.imageUploader(flashOptions);

                      /** * 选择文件后的回调函数 * @param   Array */

                     function selectFileCallback(selectFiles){  

                     // 数组里单个元素为Object,{index:在多图上传的索引号, name:文件名, size:文件大小}

                     // 其中size单位为Byte    console.log("选择了如下文件:"); 

                     var obj;

                     for(var i = 0, iLen = selectFiles.length; i < iLen; i++){ 

                     obj = selectFiles[i];

                     console.log(obj.index, obj.name, obj.size); 

                     } 

                    console.log("===================================");

                    }

                    /** * 文件大小超出时的回调函数 * @param   Object */

                    function exceedFileCallback(file){ 

                    // 参数为Object,{index:在多图上传的索引号, name:文件名, size:文件大小}

                    // 其中size单位为Byte    console.log("文件超出大小限制:"); 

                    console.log(file.index, file.name, file.size); 

                    console.log("===================================");

                    }

                    /** * 删除文件后的回调函数 * @param   Array */

                   function deleteFileCallback(delFiles){ 

                   // 数组里单个元素为Object,{index:在多图上传的索引号, name:文件名, size:文件大小} 

                   // 其中size单位为Byte    console.log("删除了如下文件:"); 

                   var obj;

                   for(var i = 0, iLen = delFiles.length; i < iLen; i++){ 

                   obj = delFiles[i]; 

                   console.log(obj.index, obj.name, obj.size); 

                   }

                  console.log("===================================");}

                  /** * 开始上传单个文件的回调函数 * @param   Object */

                 function startUploadCallback(file){ 

                 console.log("开始上传如下文件:"); 

                  console.log(file.name, file.size);  

                  console.log("===================================");

                 }

                /** * 单个文件上传完成的回调函数 * @param   Object/String   服务端返回啥,参数就是啥 */ 

                function uploadCompleteCallback(data){ 

                console.log("上传成功", data); 

                console.log("===================================");  

                }

                /**  * 单个文件上传失败的回调函数  * @param  Object/String   服务端返回啥,参数就是啥  */

                function uploadErrorCallback(data){

                 console.log("上传失败", data); 

                 console.log("==================================="); 

                }

                /**  * 全部上传完成的回调函数  */ 

               function allCompleteCallback(){ 

 

                console.log("全部上传成功");  

                console.log("===================================");

                }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值