在开发中,文件上传必不可少, 是常用的上传标签,但是它长得又丑、浏览的字样不能换,我们一般会用让,隐藏,点其他的标签(图片等)来时实现选择文件上传功能。 看代码: 代码如下: ._box { width: 119px; height: 37px; background-color: #53AD3F; background-image: url(images/bg.png); background-repeat: no-repeat; background-position: 0 0; background-attachment: scroll; line-height: 37px; text-align: cen...
代码如下: Jquery Uploadify上传带进度条,且多参数 $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径 'script': 'UploadHandler.ashx', //处理文件上传的后台脚本的路径 'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png', 'folder': 'UploadFile/', //上传文件夹的路径按20130416 'queueID': 'fileQueue', //页面...
代码如下:请选择文件// 点击#selectFile触发input:file的click事件 代码如下:jQuery(#selectFile).live(click,function(){ var ie = !-[1,]; if(ie){ jQuery(input:file).trigger(click).trigger(change); }else{ jQuery(input:file).trigger(click); } });选中文件要触发的事件 代码如下: jQuery(input:file).change(function(){ //dosomthing }); 注意事项: 1、在chrome浏览器下,为了数据安全,隐藏的input:file不能...
javascript实现 代码如下: jquery文件上传 var addMore = function() { var div = document.getElementById("div2"); var br = document.createElement("br"); var input = document.createElement("input"); var button = document.createElement("input"); input.setAttribute("type", "file"); button.setAttribute("type", "button"); button.setAttribute("value", "Remove"); button.onclick = function() { div.remo...
OSChina上发过了,那个也是我的,现在放到这来,哈哈 这段代码只能一次上传一个文件~~ 代码如下: var path=require("path"); var fs=require("fs"); var http=require("http"); //post值payload var getfield=function(field, value) { return Content-Disposition: form-data; name="+field+"\r\n\r\n+value+\r\n; } //文件payload var getfieldHead=function (field, filename) { var fileFieldHead=Content-Disposition: form-...
代码如下: (function() { if (window.FileUpload) { return; } window.FileUpload = function (id, url) { this.id = id; this.autoUpload = true; this.url = url; this.maxSize = null; this.extensions = null; this.dropId = null; }; window.FileUpload.prototype.init = function() { var obj = this; $(# + this.id).change(function () { if (obj.autoUpload) { obj.upload(); } }); if (this.supportsFormData()) { if (t...
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数定制功能,如文件大小、文件类型、按钮图片定义、上传文件脚本等。Flash版本使用方法:1.加载JS和CSS代码如下: 2.编写HTML内容代码如下:3.函数调用代码如下: $(document).ready(function() { $("#file_upload").uploadify({ ...
前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1、修改源码,(源码只支持单个文件的上传):代码如下: //修改前代码------- //var oldElement = jQuery(# + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr(id, fileId); //jQuery(oldElement).before(newElement); //jQuery(oldElement).appendTo(form); //修改前代码------- //修改后代码------- for(var i in fileEl...
本文实例展示了JavaScript判断文件上传类型的方法,是一个非常常用的技巧。具体实现方法如下: 文件上传时用到一个功能,使用html元素的input标签实现:选中图片后立即触发onchange事件上传图片,但是重复选择相同的图片不会触发onchang事件,解决办法如下:function imageSubmit(obj, imageType) { if (imageType == "0") { //相关处理代码... //解决上传相同图片不触发onchange事件var nf = obj.cloneNode(true);nf.value=''; ob...
文件上传是网站常用的功能,例如附件或图片的上传功能,解决方案也有很多,我们今天介绍一种通过jQuery无刷新的文件上传方式。 首先,我们在页面中放一个form,用来上传文件:代码如下:然后,在页面中放一个iframe,在上传的时候只刷新iframe,而不是整个网页:代码如下:接下来使用js为按钮添加功能:代码如下: $(function () {$("#btnUpload").click(function () {$("#myForm").submit();});});在按钮单击的时候,将form提交。 这...
本文实例讲述了javascript实现校验文件上传控件。分享给大家供大家参考。具体如下: 该javascript校验文件上传控件代码可检测上传文件的类型是否是图片function Checkfiles() { var fup = document.getElementById('logo1'); var fileName = fup.value; var ext = fileName.substring(fileName.lastIndexOf('.') + 1); if(ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext...
下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分,需要设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,作为隐藏。form的target等于iframe的name; 在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常; 第一个servlet处理上传,及把上传进度保存到session,第二个servlet处理ajax请求,回传session保存的进度...
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下。 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过。刚好这周没什么东西了,就拿这个来充一下数吧。 文件上传,得先准备一个“按钮”:这个看上去还是不错的吧,实现也是很简单的:开始上传文件 太丑了,就用span来做了,可控性强。添加点css: .upload-span{display: inline...
前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题:图片上传。 主题:图片上传服务器,然后通过服务器传阿里云。 不废话了直接贴前端代码:$http({method: ‘POST‘,url: ‘/wechatapp/User/setAvatar‘,data: data,headers: {‘Content-Type‘: undefined},transformRequest: function(data) {var formData = new...
文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程。 效果图:页面结构:css文件样式:.uploader{ position:relative; display:inline-block; overflow:hidden; cursor:default; padding:0; margin:10px 0px; -moz-box-shadow:0px 0px 5px #ddd; -webkit-box-shadow:0px 0px 5px #ddd; box-shadow:0px 0px 5px #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .filename{ float:le...