Flash图片上传组件 swfupload使用指南

swfupload上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件，可缩放、裁剪、旋转、定位和调色等，同时支持asp、asp.net、jsp、php等多语种

代码如下:

swfobject.addDomLoadEvent(function () {
               var swf = new fullAvatarEditor("swfContainer", {
                       id: 'swf',
                       upload_url: 'asp/Upload.asp',
                       src_upload:2
                   }, function (msg) {
                       switch(msg.code)
                       {
                           case 1 : alert("页面成功加载了组件！");break;
                           case 2 : alert("已成功加载默认指定的图片到编辑面板。");break;
                           case 3 :
                               if(msg.type == 0)
                               {
                                   alert("摄像头已准备就绪且用户已允许使用。");
                               }
                               else if(msg.type == 1)
                               {
                                   alert("摄像头已准备就绪但用户未允许使用！");
                               }
                               else
                               {
                                   alert("摄像头被占用！");
                               }
                           break;
                           case 5 :
                               if(msg.type == 0)
                               {
                                   if(msg.content.sourceUrl)
                                   {
                                       alert("原图已成功保存至服务器，url为：\n" +　msg.content.sourceUrl);
                                   }
                                   alert("头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n"));
                               }
                           break;
                       }
                   }
               );
               document.getElementById("upload").onclick=function(){
                   swf.call("upload");
               };
           });

演示图：

以上就是本文关于swfupload的简单使用示例了，希望对大家能够有所帮助。

赞 (0)

相关推荐

  • swfupload ajax无刷新上传图片实例代码

    最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个html标签<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点.这里用到的是一个插件swfupload 实现无刷新上传图片.直接上传我的代码供大家参考. 前台代码区: 复

  • 使用SWFUpload实现无刷新上传图片

    使用SWFUpload实现无刷新上传图片

    在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET项目,所以本文着重讲解ASP.NET 的使用,个人感觉示例基本给的很清晰,参考文档进行开发,并非难事 0. 首先下载swfUpload 包,在下载的包中有samples文件夹,samples下有demos文件夹,打开demos文件夹可看到如下图所示结构 我们待会会用到的包括,swfupload目录下的文件,css不建议使用以避免与自己写的C

  • swfupload 多文件上传实现代码

    var swfu; window.onload = function() { var settings = { flash_url : "js/swfupload_f9.swf", //flash地址 upload_url: "upload.php", //上传文件处理地址 post_params: {"PHPSESSID" : ""}, file_size_limit : "1000″, //大小限制 默认单位为k

  • SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享

    解决方案如下,其它框架雷同. 源代码(/system/libraries/upload.php 199 line) $this->file_type = preg_replace("/^(.+?);.*$/", "\\1", $_FILES[$field]['type']); 修改成如下: 复制代码 代码如下: //Edit By Tacker if(function_exists('mime_content_type')){ $this->file_t

  • SWFUpload多文件上传及文件个数限制的方法

    SWFUpload多文件上传及文件个数限制的方法

    本文实例讲述了SWFUpload多文件上传及文件个数限制的方法.分享给大家供大家参考,具体如下: SWFUpload是一个基于flash与JavaScript的客户端文件上传组件. handlers.js文件 完成文件入列队(fileQueued) → 完成选择文件(fileDialogComplete) → 开始上传文件(uploadStart) → 上传处理(uploadProgress) → 上传成功(uploadSuccess) → 上传完成(uploadComplete)  → 列队完

  • 为SWFUpload增加ASP版本的上传处理程序

    但也许是随着asp的逐渐淡出web开发,官方仅提供了.net.php等版本的上传处理程序,对于asp开发者来说则需要自行处理服务器端的数据接收. 刚接触此组件时就被它功能强大与灵活方便吸引,由于当时项目采用asp开发,百度一番后发现并无好用的asp上传处理程序(现在有很多啦^^),看来只能自己研究开发啦,最初采用处理普通上传的方法来截取文件的数据,几经测试发现并不能有效接收组件传递过来的文件数据,无奈只能着手分析下它发送的数据形式,通过分析发现它发送的数据格式还是和普通上传存在一些区别的,无论是

  • PHP swfupload图片上传的实例代码

    PHP代码如下: 复制代码 代码如下: if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) {    $upload_file = $_FILES['Filedata'];    $file_info   = pat

  • 文件上传之SWFUpload插件（代码）

    下面通过一段代码给大家演示下,主要分为1.前台文件index.html和 2.后台文件upload.php.具体代码如下所示: 1.前台文件index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

  • SwfUpload在IE10上不出现上传按钮的解决方法

    在系统测试过程中,发现使用了SwfUpload实现的无刷新上传功能,在IE10上竟然无法使用了,难道SwfUpload不支持吗?还是需要换一种实现方式呢?最后通过了解SwfUplad.JS文件发现,我们是可以修改的,让其支持IE10,具体解决方案如下: 打开SwfUpload.js,在js文件中找到// Private: getFlashHTML generates the object tag needed to embed the flash in to the document"这行和&q

  • Flash图片上传组件 swfupload使用指南

    Flash图片上传组件 swfupload使用指南

    swfupload上传编辑器是一款支持本地上传.预览.视频拍照和网络加载的flash头像编辑上传插件,可缩放.裁剪.旋转.定位和调色等,同时支持asp.asp.net.jsp.php等多语种 复制代码 代码如下: swfobject.addDomLoadEvent(function () {                var swf = new fullAvatarEditor("swfContainer", {                        id: 'swf',

  • 基于Node的React图片上传组件实现实例代码

    基于Node的React图片上传组件实现实例代码

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

  • jQuery移动端图片上传组件

    本文实例为大家分享了移动端图片上传组件,供大家参考,具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片,并实现文件上传服务端 文件依赖 JQUERY 参数API loading:'.loading', 页面显示loading的图标selector url:'', 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ..... isC

  • vux uploader 图片上传组件的安装使用方法

    1.网址: https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --save-dev babel-preset-es2015 .babelrc { "presets": [ ["env", { "modules": false, "targets": { "browsers":

  • vue图片上传组件使用详解

    vue图片上传组件使用详解

    vue图片上传组件,供大家参考,具体内容如下 最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记. 首先来看看最终效果 1.不允许删除 2.允许用户删除(显示删除按钮) 实现的效果就是上图显示内容 接下来说说组件布局那部分直接上代码了 <template> <div class="uploadImg"> <div class="upload-content"> <div class=&q

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

  • 利用Vue3和element-plus实现图片上传组件

    利用Vue3和element-plus实现图片上传组件

    目录 前言 具体代码 图片上传 上传组件 前言 element-plus 提供了 uploader 组件,但是不好定制化,所以自己又造了个轮子,实现了一个图片上传的组件,它的预期行为是: 1.还没上传图片时,显示上传卡片 2.上传图片时显示进度条,隐藏上传卡片 3.上传成功时显示图片缩略图,上传失败则显示失败提示 4.支持上传图片的预览和删除 具体如下图所示: 具体代码 图片上传 这里使用的图床是牛图网,无需注册,貌似也没有图片大小的限制,但是请不要上传违规图像. <code>import a

  • 微信小程序图片上传组件实现图片拖拽排序

    微信小程序图片上传组件实现图片拖拽排序

    目录 引言 首先来看效果 组件设计 使用方式 总结 引言 图片上传组件是一个组件库目前来看必不可少的功能了.笔者近日给自己开源的toy工具库也添加了这一功能.相比原生和大部分组件库来说,它不仅支持长按提示删除,还能够支持图片的拖拽排序,很是nice! (也是为了毕设时身边同学能够更快上手小程序,更加将中心侧重于逻辑和设计) 本文我将继续介绍组件的设计思路: 首先来看效果 对于组件内部来说.笔者提供了一个参数去让开发者决定是否应该在场景中支持拖动排序.这里略去这些无关代码. 拖拽排序功能使用了微信

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • 基于vue-upload-component封装一个图片上传组件的示例

    需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要

随机推荐