1、下载uploadify, 我的是v3.22、模板页面引入:<base href=‘{base_url()}‘ />
<script type="text/javascript" src="/public/admin/js/jquery.js"></script>
<script type="text/javascript" src="/public/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="/public/js/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/uploadify/uploadify.css"...
新年礼,提供简单、易套用的 jQuery AJAX上传示例及代码下载。后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新、不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大、外观复杂,欲仅取出部分功能来引用,反而不易。因...
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下:2、该图片上传插件实现功能如下: 1>能够异步上传,上传成功之后,服务器返回响应结果;能够定义上传前和上传后自定义处理方式; 2>能够实现文件格式判断,过滤非图片文件; 3>服务端能够过滤重复上传的图片;3...
插件介绍这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪、旋转,花了不少时间才看到了这个插件,感觉功能挺全面,代码实现起来也挺简单,再加上用的是Bootstrap,对移动端操作也有适配,于是就用了。现在稍微有点时间就记录一下,方便以后再用的时候查阅。另外也有对应的js版本。官方文档(英文)jQuery
GitHub项目地址官方示...
html部分<form method="post" action="" id="passForm" enctype="multipart/form-data" multipart=""><div id="Pic_pass"><p style="font-size: 20px;font-weight: bold;">请上传护照详细照片 </p><p><span style="color: red">注:每张照片大写不可超过4M,且最多可以传十张</span></p><div class="picDiv"><div class="addImages"><input type="file" class="file" id="fileInput" multiple="" accept="image/png, image/jpeg, i...
引言最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中使用uploadify插件进行上传,每次都会报错很是无语,最后找到解决方案,这里记录一下,算是对工作中遇到的bug的一个总结。bug这是vs调试状态下,显示的信息。在浏览器端,点击第一次上传按钮,正常,将弹出框关闭后,第...
最近在做一个图片上传到服务器的功能,之前基本没有什么JS的经验,用的也是网上的插件。做了一个星期才把他弄好,现在做一下总结,方便以后查看。用的插件是WebUploader,上面有很多例子,我找的例子如下图: 在实例化WebUploader的时候需要修改upload.js文件中的server的地址,这样才能将指定的图片上传到服务器代码如下:// 实例化uploader = WebUploader.create({pick: {id: ‘#filePicker‘,label: ‘点击选择图片‘},formDat...
1.下载:https://github.com/blueimp/jQuery-File-Upload2.命令:npm install bower install======================3.修改basic.html 如下:1.cdn 静态引用修改2.ajax提交路径修改====&&& 其他demo页面修改同理 =======;下面修改完了以后。如下所示:<!DOCTYPE HTML><!--/* * jQuery File Upload Plugin Basic Demo * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2013, Sebastian Tschan * https://blueimp.ne...
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify。。。悲剧 对于Ajax文件上传,大体是有: 1、创建一个input type="file" 的文件上传按钮,根据其id监听绑定其change事件,在事件中用jquery创建一个iframe,嵌入添加隐藏form,同时创建input type="file",id相同的文件上传按钮,并传入其他需要提交的数据...
网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题;使用jquery2.1版本,较老版本不支持异步文件上传功能;表单代码:[html]view plaincopyprint?<form id="fileUploadForm"> <input type="file" name="file" class="imageUpload"/> <span id="commit">提交到服务器</span> </form> [html]view plaincopyprint?<form id="fileUploadForm"> <input type="file" name="file" c...
新年礼,提供简单、易套用的 jQuery AJAX 上传示例及代码下载。后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新、不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大、外观复杂,欲仅取出部分功能来引用,反而不易。因...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="/static/jquery-1.12.4.js"></script><h3>4.文件上传</h3> <input type="file" id="img" /> <div id="container"></div> <a class="btn" onclick="AjaxSubmit6()">上传</a><script>function AjaxSubmit6() { //document.getElementById(‘img‘)[0] var data = new FormData()...
人比較懒 有用为主 不怎么排版了先放上Uploadify的官网链接:http://www.uploadify.com/ -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址。分flash版(免费)和html5版(收费)。官网上能够看到效果演示。另外在网上找到了一份Uploadify3.2的中文API文档。能够在我上传的资源里面下载。以下就是一个基于springMVC的文件上传演示样例,看起来可能比文档更直观一些···1.下载插件放到项目中2.在jsp页面中引入下面JS和CSS<sc...
在浏览器里面执行很正常的代码,打包到手机上测试就出问题了,浏览器中的执行版本如下: 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>up test</title> 6</head> 7<body> 8<h1>上传测试</h1> 9<p></p>10<br>11<form enctype="multipart/form-data" id="doUpfile">12<input type="file" name="file">13</form>14<button id="yes">Do it!</button>15<script src="./libs/jquery.js"></script>16<scr...
前言开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就会自动的保存在预定义变量$_FILES中,我们在后台就可以通过这个预定义变量得到前台上传的图片信息,除了这种方法还有很多插件可以实现上传图片功能的。jQuery-file-Upload就是其中一种,而且可以实现跨域传输.jQuery-file-Upload介绍jQuery File Upload 是一个...