jQuery无刷新上传之uploadify简单代码

在前端开发中,文件上传是必不可少的功能之一。而jQuery插件uploadify可以实现无刷新上传,给用户带来更好的体验。

uploadify基本使用方法

  1. 引入jQuery和uploadify插件的js和css文件
---- -------- ---
------- ----------------------------------------------------------------------------

---- ------------------ ---
----- ---------------- --------------- ---------------------
------- ---------------------- ---------------------------------------
  1. 编写HTML代码,添加一个文件选择框和一个上传按钮
------ ----------- ------------------ ---------------- --
-- --------------------------------------------------------------
  1. 使用jQuery初始化uploadify
------------ -
  -----------------------------
    ------ ----------------- -- ------------------
    ----------- -------------- -- --------------
    ------------ ------------------------ -- ---------
    -------- ------ -- ----------
    ------- ----- -- ------
    -------------- - ------ ------- -- ------
    -------------- - ------- ------ ------- -- ---------
    ---------------- ------ -- -----------
    ------------- ------- -- --------
    ------------------ -------------- ----- --------- - -- ----------
        --------------
    -
  ---
---

uploadify参数详解

  • swf:uploadify.swf文件的路径。
  • uploader:处理文件上传的后台php脚本的路径。
  • cancelImg:取消按钮的图片路径。
  • multi:是否允许选择多个文件,默认为true。
  • auto:是否自动上传,默认为false。
  • fileTypeDesc:文件类型描述,用于在文件选择框中显示可选文件类型。
  • fileTypeExts:允许上传的文件类型,多个文件类型之间用分号隔开。
  • fileSizeLimit:允许上传的最大文件大小,默认为0(表示不限制大小)。
  • buttonText:上传按钮上的文字,默认为'选择文件'。
  • onUploadSuccess:上传成功后的回调函数。

uploadify常用方法

  • upload:手动触发上传操作。
  • cancel:手动取消上传操作。
  • destroy:销毁uploadify插件。
  • disable:禁用uploadify插件。
  • enable:启用uploadify插件。

示例代码:

------------ -
  --- --------- - -----------------------------
    ------ -----------------
    ----------- --------------
    ------------ ------------------------
    -------- ------
    ------- -----
    -------------- - ------ -------
    -------------- - ------- ------ -------
    ---------------- ------
    ------------- -------
    ------------------ -------------- ----- --------- -
        --------------
    -
  ---

  -- --------
  -------------------------------- -
    --------------------------
  ---

  -- --------
  -------------------------------- -
    ---------------------------
  ---

  -- -------------
  --------------------------------- -
    ----------------------------
  ---

  -- -------------
  --------------------------------- -
    --------------------------- ------
  ---

  -- -------------
  -------------------------------- -

---------------------------------------------------------- ----------
-------------------------------------------------------------------------------------
  

猜你喜欢

  • Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法

    在使用Bootstrap前端框架时,我们通常会用到其中的图标字体库。其中,glyphicons-halflings-regular.woff是一种常见的字体文件,它包含了许多常用的图标,如箭头、加号、...

    8 年前
  • JS中如何实现点击a标签返回页面顶部的问题

    如何使用JavaScript实现点击a标签返回页面顶部 在网页设计中,经常需要使用户快速回到页面最顶部。这个功能可以通过点击一个链接实现。本文将介绍如何使用JavaScript来实现这一功能,并提供示...

    8 年前
  • jQuery实现鼠标悬停3d菜单展开动画效果

    在网页设计中,3D效果已经成为一种非常流行的元素。在本文中,我们将介绍如何使用jQuery实现一个鼠标悬停3D菜单展开动画效果。 实现思路 首先,我们需要准备好HTML和CSS代码。

    8 年前
  • javaScript基础详解

    JavaScript基础详解 JavaScript是一门广泛应用于Web前端开发中的编程语言,也可以在服务器端使用Node.js运行。本篇文章将深入探讨JavaScript的基础知识和应用,帮助读者打...

    8 年前
  • ajax与json 获取数据并在前台使用简单实例

    使用 Ajax 和 JSON 在前端获取和处理数据的简单实例 在现代 Web 应用中,经常需要从服务端获取数据并在前台进行展示或者操作。其中,Ajax 和 JSON 是两个非常重要的技术,它们可以帮助...

    8 年前
  • ajax 提交数据到后台jsp页面及页面跳转问题

    使用Ajax提交数据到后台JSP页面及页面跳转问题 在前端开发中,常常需要向后端服务器提交数据并获取相应的处理结果。其中,使用Ajax技术可以实现异步数据交换,提高用户体验和页面性能。

    8 年前
  • JS实现touch 点击滑动轮播实例代码

    在移动端开发中,实现一个可以通过手指进行点击滑动的轮播图是非常常见的需求。通过JS实现这个功能可以提高用户体验和页面交互性。 前置知识 在开始编写代码之前,我们需要了解一些基本的前置知识: touc...

    8 年前
  • 原生JS和jQuery操作DOM对比总结

    DOM(文档对象模型)是前端开发中重要的概念,它是一种可以访问和操作HTML和XML文档的编程接口。在前端开发中,我们经常需要使用JavaScript来操作DOM元素,而原生JS和jQuery是操作D...

    8 年前
  • BootStrap组件之进度条的基本用法

    Bootstrap是一种流行的前端开发框架,提供了丰富的UI组件和工具。其中进度条是一个常见的UI组件,用于表示任务的完成情况或指示加载进度。在本文中,我们将介绍Bootstrap进度条的基本用法。

    8 年前
  • 小程序开发实战:实现九宫格界面的导航的代码实现

    小程序开发实战:实现九宫格导航界面 在小程序中,九宫格导航是一种简单、直观、易于使用的用户界面设计。本文将介绍如何通过代码实现一个基于微信小程序的九宫格界面导航,并提供示例代码和指导意义。

    8 年前
  • JavaScript实现事件的中断传播和行为阻止方法示例

    在前端开发中,事件处理是一个非常重要的部分。但在某些情况下,我们需要在事件触发后停止事件的传播或阻止默认行为。JavaScript提供了方法来使这些操作成为可能。 事件传播 通常,当一个元素上的事件被...

    8 年前
  • 浅谈JavaScript异步编程

    JavaScript是一种单线程语言,意味着一次只能执行一个任务。这里就会出现一个问题,当需要执行的任务比较耗时时,会阻塞整个网页的响应,给用户带来不好的体验。异步编程是为了解决这个问题而存在的。

    8 年前
  • 详解JavaScript中this的指向问题

    在JavaScript中,this是一个特殊的关键字,它通常用于表示当前执行上下文中的对象。但是,由于JavaScript中函数的灵活性和多样性,this的指向并不总是那么明确和直观。

    8 年前
  • AngularJs上传前预览图片的实例代码

    AngularJS上传前预览图片的实例代码 在 Web 应用程序中,上传图片是一个常见的需求。通常情况下,在用户选择要上传的文件之前,我们需要让他们先预览所选的图片。

    8 年前
  • jquery表单插件form使用方法详解

    jQuery表单插件Form使用方法详解 jQuery Form插件是一个强大的工具,用于处理表单提交和Ajax文件上传。在本文中,我们将深入探讨如何使用这个插件来创建易于管理和可扩展的表单。

    8 年前
  • jquery表单验证插件validation使用方法详解

    jQuery表单验证插件Validation使用方法详解 在前端开发中,表单验证是一个必不可少的功能。jQuery Validation是一个流行的表单验证插件,它可以快速、简便地为网页表单添加验证规...

    8 年前
  • JS中from 表单序列化提交的代码

    如何使用JavaScript中的form表单序列化提交数据 在前端开发中,我们经常需要将表单数据提交到后台进行处理或者保存。其中一种常用的方式是通过表单序列化来将表单数据转换为字符串,然后通过AJAX...

    8 年前
  • 微信小程序通过api接口将json数据展现到小程序示例

    微信小程序通过API接口将JSON数据展现到小程序 微信小程序是一种轻量级的应用程序,可在微信中运行而无需下载或安装。它可以让开发人员使用HTML、CSS和JavaScript构建应用程序,并使用微信...

    8 年前
  • jqGrid翻页时数据选中丢失问题的解决办法

    解决 jqGrid 翻页时数据选中丢失问题 问题描述 在使用 jqGrid 进行数据展示和选择时,当翻页时会出现数据选中丢失的问题。这是因为 jqGrid 默认只会保存当前页面的选中状态,而不会保存其...

    8 年前
  • node.js依赖express解析post请求四种数据格式

    Node.js依赖Express解析POST请求四种数据格式 在Web开发中,POST请求是常见的一种方式,用于向服务器发送数据。而处理POST请求的过程中,需要对发送的数据进行解析以获取其中的信息。

    8 年前

相关推荐

    暂无文章