利用jquery.uploadify插件来实现图片上传和预览效果

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果,首页我们要看看关于利用jquery uploadify上传图片要注意事项吧。
注意事项

  (1)、如果页面没有显示"browse"按钮,则说明你的'uploader' : '<%=basepath%>images/uploadify.swf'配置不对,检查下路径是否正确。

  (2)、如果需要修改按钮的图片:可以使用'buttonimg'配置进行替换

  (3)、上传完成后,'oncomplete'事件没有触发:在后台servlet处理完后,要向页面输出1,否则页面的oncomplete回 调函数不会执行。response.getwriter().write(1);

  (4)、如果在后台servlet处理上传将图片的名称改变的话,就不能通过fileobj获得它的值,而是要在后台servlet输出新文件 名:out.print(filename);在jsp教程页面要相应使用response来获得新值。

  (5)、图片预览实现:

  在jsp页面中添加一个<img src=""></img>,当上传完成后在oncomplete事件中修改img的src值。

  3、下载地址

  www.uploadify.com/download/

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>实现图片上传和预览效果jquery.uploadify插件</title>
</head>

<body>
<script type="text/网页特效">
  $(document).ready(function() {
  $('#fileinput').uploadify({
   //以下参数均是可选
   'uploader' : '<%=basepath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf'
   'script' : '<%=basepath%>uploadservlet', //指定服务器端上传处理文件,默认'upload.php教程'
   'cancelimg' : '<%=basepath%>images/cancel.png', //指定取消上传的图片,默认'cancel.png'
   'buttonimg':'<%=basepath%>images/upload2.jpg',
   'auto' : true, //选定文件后是否自动上传,默认false
   'folder' : '/userphoto' , //要上传到的服务器路径,默认'/'
   'multi' : false, //是否允许同时上传多文件,默认false
   'filedesc' : '图片文件' , //出现在上传对话框中的文件类型描述
   'fileext' : '*.jpg;*.bmp;*.png;*.gif', //控制可上传文件的扩展名,启用本项时需同时声明filedesc
   'sizelimit': 86400, //控制上传文件的大小,单位byte
   'oncomplete': function(event,queueid,fileobj,response,data) {
    $('#image').attr("src","<%=basepath%>userphoto/"+res ponse);
    $('#image').show();
    $('#photo').attr("value",response);
   },
   'onerror' : function(event, queueid, fileobj){
    alert("文件:" + fileobj.name + " 上传失败");
   }
  });
  });
  </script>

</body>
</html>

时间: 2024-12-31 10:24:34

利用jquery.uploadify插件来实现图片上传和预览效果的相关文章

jQuery+HTML5实现图片上传前预览效果_jquery

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

asp.net文件图片上传带预览效果

asp教程.net文件图片上传带预览效果 图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像. 程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素. 程序有以下几种预览方式: simple模式:直接从file的value获取图片路径来显示预览,适用于ie6: filter模式:通过selection获取file的图片路径,再用滤镜来显示预览,适用于ie7/8: domfile模式:调用file的getAsDataURL

Asp.net图片上传实现预览效果的简单代码

这篇文章介绍了Asp.net图片上传实现预览效果的简单代码,有需要的朋友可以参考一下   在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下:  <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>         <asp:Image ID="Image1" runat="

jquery 图片上传本地预览效果代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net /1999/xhtml" > <head>     <meta http-

jquery实现兼容浏览器的图片上传本地预览功能_jquery

一.图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐.谷歌.ie8,其他的没有进行测试过 复制代码 代码如下: (function($){ jQuery.fn.extend({ uploadPreview: function(opts){ opts = jQuery.extend({ width: 0, height: 0, imgPreview: null,

thinkphp jquery实现图片上传和预览效果_php技巧

先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

Android图片上传实现预览效果_Android

首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片  3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollG

php 图片上传并预览效果

if(!isset($_session))session_start(); /**2010-6-22  * $data 数组类型    包含以下变量  -------------------------------  * $sub_type        submit类型(upload:上传按钮    delete:删除按钮),默认upload  * $file            通过表单获取的$_files['filename']数组  * $img_tag_id        预览图片的

Android图片上传实现预览效果

首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片 3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollGr