本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法。分享给大家供大家参考。具体如下： Ajax上传说白了还是使用form表单提交，在当前页面加一个iframe，将提交的内容跳转到iframe中，造成一种页面无刷新的错觉。 以前也做过上传，基本是是使用commons-fileupload组件，基本的步骤是使用servlet处理完上传之后，使用PrintWrite的对象实例输出显示内容，可以是直接输出内容，也可以是输出script进行操作如代码如下:re...
找了好久终于在网上找到了ajax异步上传文件的方法，不过网上大多数是php的 ，我改为struts2写的 大同小异，希望对学习java的人有一定的帮助。我上传的是音乐文件。 ajaxfileupload.js这个js文件是主要文件，一定要导入。 jsp页面 ，其中我还做了div的隐藏*****************************<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = reque...
在上篇文章给大家介绍了这篇文章里面的后台Servlet。所以这里只看前台的JS代码。 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象：FormData FormData 对象可以使用append 方法进行 key - value的数据添加，与以前我们常用的json不同的就是可以异步上传二进制文件。 1、FormDate对象的创建 var formData = new FormData();2、向 FormDate 对象添加数据 formData.append("catname", "我是一只喵"); formData.append("age", 1...
最近在做一个集富媒体功能于一身的项目。需要上传视频。这里我希望做成异步上传，并且有进度条，响应有状态码，视频连接，缩略图。 服务端响应{"thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg","success": true,"link": "/slsxpt//upload/video/fdceefc.mp"}并且希望我的input file控件不要被form标签包裹。原因是form中不能嵌套form，另外form标签在浏览器了还是有一点点默认样式的，搞不好又要写css。 以前用ajaxFileUplo...
之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种JS库，附带多图上传，预览，甚至是图片处理等特技。那么如果不接触第三方的库，可不可以利用ajax来做。就这个问题，有人给出的解决方案是借助iframe,这里就不赘述了。但是Html5是个好东西，他提供了FormData，FormData可以帮助我们拼凑参数，乃至文件资源。这样，我们就可以轻松用$.ajax不刷新上传。当然也不需要iframe。 代码 下列是前端部分。 <!DOCTYLE html> <me...
图片文件上传，有很多种协议的，这次主要讲的是“Content-Type：multipart/form-data;”的形式。 在工作中前台一些静态文件是通过FTL模版系统，前台页面通过SSI进行引用的，项目开发的时候就需要生成大量的静态SHTML文件了，本来觉得应该是后台的事情，可是自从我进这公司，这快东西就交给了前端~~我表示无语，没办法就按着习惯来吧，但我是个懒人，就想着能不能通过ajax提交呢 基于平时对MDN的翻阅，今天主要是FormData这个对象解...
ajax是无法提交文件的，所以在上传图片并预览的时候，我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的，AjaxFilleUpload.js对上面的方法进行了一个包装，使得我们不用去管理Iframe的一系列操作，也不用影响我们的页面结构，实现异步的文件提交。 html: 代码如下:<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" /> js: 代码如下:$.ajaxFileUpload({ url:${pageContext.r...
今天笔者需要一款图片上传插件，但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个。 方法1，仅使用jquery代码，不用第三方插件。代码如下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> <input type="button" id="uploadButton" value="Upload" /> </p> <script type="text/javascript"> $(function() { $(.inp_fileToUpload).change...
代码如下:<?php if($_FILES){ ?> <script> window.parent.ajaxUploadPicture.uploadCallback(http://img0.bdstatic.com/img/image/5099213b07eca8065380ce7f75e95dda144ad348269.jpg); </script> <?php die; } ?> <!DOCTYPE html> <html> <head> <script> ajaxUploadPicture = { $o1: }; ajaxUploadPicture.ajaxUploadFile = function ($o){ this.$o1 = $o; var $iframe = document.createElement(iframe); $iframe.style.display ...
本例用了jquery.form.js请到演示页面查看 CSS Code 代码如下:<style> form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } #progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } #bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } #percent { position:absolute; display:inline-block; t...
代码如下:<span style="font-family: verdana, ms song, 宋体, Arial, 微软雅黑, Helvetica, sans-serif; font-size: 14px; line-height: 21px; text-align: left; background-color: rgb(255, 254, 247); ">avascript部分</span> 代码如下:<!doctype html> <html> <head> <meta charset=utf-8> <head> <title>ajax 文件上传~~</title> </head> <script> window.onload=function(){ var form=document.getElementsByTagName(form...
一般的表单都是通过ajax方式提交，所以碰到带文件上传的表单就比较麻烦。基本原理就是在页面增加一个隐藏iframe，然后通过ajax提交除文件之外的表单数据，在表单数据提交成功之后的回调函数中，通过form单独提交文件，而这个提交文件的form的target就指向前述隐藏的iframe。 html 代码 代码如下:<html> <body> <form action="upload.jsp" id="form1" name="form1"encType="multipart/form-data" method="post"target="hidden_fram...
在网上搜索了一下，发现以jquery+ajax方式实现单张图片上传的代码是有的，但实现批量上传图片的程序却没搜索到，于是根据搜索到的代码，写了一个可以批量上传的。先看效果图点击增加按钮，会增加一个选择框，如下图：选择要上传的图片，效果图如下：上传成功如下图：下面来看代码：前台html主要代码： 代码如下:<button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile();return false;">确定上传</button>...
找遍资料得出结果：不能 不过同时也找到了解决办法，就是用iframe的方式来提交表单，即实现无刷新提交表单又可以上传文件！ 一、HTML代码 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无刷新提交表...
1. FancyUpload (演示地址)FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。 2. SwfUploadPanel (演示地址)SwfUploadPanel是一个结合SwfUpload v2.0.2与ExtJS 2.0.x开发的多文件上传面板(panel)。 3. Yahoo! UI Library: Uploader (演示地址)YUI Uploader Control结合Flash开发的文件上传控件。支持在同一个”Open File”对话框中一次性选择多个文件。文件扩展名过滤，以帮助...