jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)

特点:

1.不依赖与jquery

2.而且,好看些吧..支持很多实例,上传成功后.会有一个回调函数.比如缩略图地址显示出来

用法:

代码如下:

<link href="http://fineuploader.com/source/fineuploader-3.9.1.min.css" rel="stylesheet" />
<script src="http://fineuploader.com/source/fineuploader-3.9.1.min.js"></script>

代码如下:

var thumbnailuploader = new qq.FineUploader({
            element: $('#thumbnail-fine-uploader')[0],
            request: {
                endpoint: 'Uploadimg'
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
            },
            callbacks: {
                onComplete: function (id, fileName, responseJSON) {
                    if (responseJSON.success) {
                        //alert(responseJSON.guidimg);
                        $('#logo').val(responseJSON.guidimg);
                        $('#thumbnail-fine-uploader').append('<img id="logoimg" style="width:200;hight:300px;"  src="' + responseJSON.imgurl + '" alt="' + responseJSON.guidimg + '">');
                    }
                }
            }
        });

赞 (0)

相关推荐

  • jQuery插件uploadify实现ajax效果的图片上传

    昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check

  • jQuery实现图片上传和裁剪插件Croppie

    jQuery实现图片上传和裁剪插件Croppie

    在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求.最常见的就是各用户系统要求用户上传和裁剪头像的应用.今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie. 运行效果图: HTML 首先我们将相关js和css文件载入head中. <script src="jquery.min.js"></script> <script src="croppie.min.js"><

  • jquery 图片上传按比例预览插件集合

    js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片

  • jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

    网页端 裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.o

  • Jquery uploadify图片上传插件无法上传的解决方法

    首先你确定你使用的插件的版本,版本不同,产生的问题也不同,我用的是3.2.1的版本,我前几天已经做好的功能今天运行的时候出错了,搞了半天也不知道那错了,最好仔细寻找,原来是jquery库的引入问题,可能是我引入的包版本低了,我换了一个js库立马好了,真是坑爹啊,谁需要这个demo的可以邮件我!

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ［"区域":是宽*高,也就是面积:] ［"放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数］ 一.怎么能放大或者缩小图片的局部?

  • 图片上传插件jquery.uploadify详解

    1.js代码: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf' 'script' : '<%=basePath%>

  • jQuery自定义图片上传插件实例代码

    jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)

    特点: 1.不依赖与jquery 2.而且,好看些吧..支持很多实例,上传成功后.会有一个回调函数.比如缩略图地址显示出来 用法: 复制代码 代码如下: <link href="http://fineuploader.com/source/fineuploader-3.9.1.min.css" rel="stylesheet" /><script src="http://fineuploader.com/source/fineupload

  • TinyMCE 新增本地图片上传功能

    TinyMCE 新增本地图片上传功能

    这样TinyMCE 就可以正常显示图片了.其实该功能属于普通HTML富文本控件基本功能了.现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片. 实现思路: 使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展, 具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片.将Ajax上传图片集成到 TinyMCE 中, 主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 ad

  • php+html5实现无刷新图片上传教程

    php+html5实现无刷新图片上传教程

    本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu

  • thinkphp实现图片上传功能

    关于图片上传,实现方法很多,比如可以用jQuery,当然,我们的thinkPHP内置了关于图片上传的功能,我们可以直接使用,使用方法如下: 首先,是表单书写,我们建立如下表单: <form action="__URL__/addChk" method="post" enctype="multipart/form-data"> <table cellspacing="1" cellpadding="2

  • spring boot实现图片上传和下载功能

    spring boot实现图片上传和下载功能

    这篇博客简单介绍下spring boot下图片上传和下载,已经遇到的问题.首先需要创建一个spring boot项目. 1.核心的controller代码 package com.qwrt.station.websocket.controller; import com.alibaba.fastjson.JSONObject; import com.qwrt.station.common.util.JsonUtil; import org.slf4j.Logger; import org.slf

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

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

  • vue-quill-editor 自定义工具栏和自定义图片上传路径操作

    背景: 1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现,需要删除部分功能. 2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区,这会导致content字符长度太长,不一定可以传到后台保存(其实即使可以保存也不推荐这种方案).所以我们需要将方案修改为将图片上传到服务器,然后通过URL的 方式访问到图片回显及使用. vue-quill-editor工具栏改造及自定义图片上传(这里使用的是element-ui的上传组件): 引入

  • 基于Flutter实现图片选择和图片上传

    基于Flutter实现图片选择和图片上传

    目录 内容简介 图片选择插件 权限申请 UI 改造 图片上传 内容简介 本篇将介绍 Flutter 中如何完成图片上传,以及上传成功后的表单提交.涉及的知识点如下: 图片选择插件wechat_assets_picker的使用. 图片选择 iOS 和安卓的应用权限配置. 图片选择组件的封装. 图片上传接口的封装. 添加和编辑页面中图片上传实现. 图片选择插件 Flutter 的图片选择插件很多,包括了官方的 image_picker,multi_image_picker(基于2.0出了 multi

  • php实现base64图片上传方式实例代码

    php实现base64图片上传方式实例代码

    本例子中没有采用File Post上传文件方式!原理一样,为了更加的理解base64 选择将其输出在文本域中,并提交至服务器!运用到项目中建议采用提交File方式. html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

随机推荐