『壹』 jsp中使用jquery的ajaxfileupload插件怎么实现异步上传
ajaxfileupload实现异步上传的完整例子：JSP页面中引入的script代码：<script> function ajaxFileUpload() { $("#loading").ajaxStart(function(){ $(this).show(); })//开始上传文件时显示一个图片 .ajaxComplete(function(){ $(this).hide(); });//文件上传完成将图片隐藏起来 $.ajaxFileUpload({ url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址 secureuri:false,//一般设置为false fileElementId:'imgfile',//文件上传空间的id属性 <input type="file" id="imgfile" name="file" /> dataType: 'json',//返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量 if(typeof(data.error) != 'undefined') { if(data.error != '') { alert(data.error); }else { alert(data.message); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script>struts.xml配置文件中的配置方法：<struts> <package name="struts2" extends="json-default"> <action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction"> <result type="json" name="success"> <param name="contentType">text/html</param> </result> <result type="json" name="error"> <param name="contentType">text/html</param> </result> </action> </package></struts>上传处理的Action ImageUploadAction.actionpackage com.test.action;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.util.Arrays;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")public class ImageUploadAction extends ActionSupport { private File imgfile; private String imgfileFileName; private String imgfileFileContentType; private String message = "你已成功上传文件"; public File getImgfile() { return imgfile; } public void setImgfile(File imgfile) { this.imgfile = imgfile; } public String getImgfileFileName() { return imgfileFileName; } public void setImgfileFileName(String imgfileFileName) { this.imgfileFileName = imgfileFileName; } public String getImgfileFileContentType() { return imgfileFileContentType; } public void setImgfileFileContentType(String imgfileFileContentType) { this.imgfileFileContentType = imgfileFileContentType; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } @SuppressWarnings("deprecation")public String execute() throws Exception { String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload"); String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" }; try { File f = this.getImgfile(); String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase(); /* if(this.getImgfileFileName().endsWith(".exe")){ message="上传的文件格式不允许!!!"; return ERROR; }*/ /** * 检测上传文件的扩展名是否合法 * */ if (!Arrays.<String> asList(imgTypes).contains(fileExt)) { message="只能上传 gif,jpg,jpeg,png,bmp等格式的文件!"; return ERROR; } FileInputStream inputStream = new FileInputStream(f); FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName()); byte[] buf = new byte[1024]; int length = 0; while ((length = inputStream.read(buf)) != -1) { outputStream.write(buf, 0, length); } inputStream.close(); outputStream.flush(); } catch (Exception e) { e.printStackTrace(); message = "文件上传失败了!!!!"; } return SUCCESS; }}
『贰』 jQuery fileupload 多文件上传
//js$(function(){//文件上传地址//varurl='http://localhost/index.php/upload/do_upload';varurl='http://localhost/index.php/uploadwe';//初始化，主要是设置上传参数，以及事件处理方法(回调函数)$('#fileupload').fileupload({autoUpload:true,//是否自动上传//url:url,//上传地址dataType:'json',done:function(e,data){//设置文件上传完毕事件的回调函数//$.each(data.result.files,function(index,file){$("#myimg").attr({src:data.result.imgurl});$("#myimg").css({width:"290px",height:"218px"});//alert(data.result);},progressall:function(e,data){//设置上传进度事件的回调函数varprogress=parseInt(data.loaded/data.total*5,10);$('#progress.bar').css('width',progress+'%');}});});//上传至服务后，服务器返回json数据–上传图片的地址。//html<labelfor="text">上传图片</label><inputid="fileupload"type="file"name="files"data-url="<spanstyle="color:#ff6666;">jquery_save_img</span>"multiple>//data-url为上传至服务器端的处理接口/地址，可替换js中的url//服务器端functionjquery_save_img(){$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');$max_size='500000000000';//最大文件限制（单位：byte）$upfile='./uploads';//图片目录路径$file=$_FILES['files'];/*echo'filename:'.$file['tmp_name'].';<br/>';echo'size:'.$file['size'].';<br/>';echo'type:'.$file['type'].';<br/>';echo'name:'.$file['name'].';<br/>';*/if($_SERVER['REQUEST_METHOD']=='POST'){//判断提交方式是否为POSTif(!is_uploaded_file($file['tmp_name'])){//判断上传文件是否存在echo"<fontcolor='#FF0000'>文件不存在！</font>";exit;}if($file['size']>$max_size){//判断文件大小是否大于500000字节echo"<fontcolor='#FF0000'>上传文件太大！</font>";exit;}if(!in_array($file['type'],$arrType)){//判断图片文件的格式echo"<fontcolor='#FF0000'>上传文件格式不对！</font>xxx:".$file['type'];exit;}if(!file_exists($upfile)){//判断存放文件目录是否存在mkdir($upfile,0777,true);}$imageSize=getimagesize($file['tmp_name']);$img=$imageSize[0].'*'.$imageSize[1];$fname=$file['name'];$ftype=explode('.',$fname);$picName=$upfile."/cloudy".$fname;if(file_exists($picName)){//echo"<fontcolor='#FF0000'>同文件名已存在！</font>";//exit;}if(!move_uploaded_file($file['tmp_name'],$picName)){echo"<fontcolor='#FF0000'>移动文件出错！</font>";exit;}else{/*echo"<fontcolor='#FF0000'>图片文件上传成功！</font><br/>";echo"<fontcolor='#0000FF'>图片大小：$img</font><br/>";echo"图片预览：<br><divstyle='border:#F001pxsolid;width:200px;height:200px'><imgsrc="".$picName.""width=200pxheight=200px>".$fname."</div>";*/echo'{"imgurl":"http://localhost/uploads/cloudy'.$fname.'"}';}}}
『叁』 ajaxfileupload.js 如何继续上传
在ajaxfileupload返回success里面再绑定一次change时间，就可以了，因为在文件异步上传成功后 之前的input的change事件被解绑了
『肆』 ajaxFileUpload异步上传图片，服务器文件叫多，如何删除啊~~
可以做个批量清理的小程序，把所有上传的图片，都存在数据库里，然后遍历上传的这个目录，读取到文件名以后，去数据库查，要是不存在的话，说明这张图是没有用的，删除~
『伍』 ajaxfileupload上传怎么用
1）上文html中控件的css样式，都是用的bootstrap框架里的基本样式，也可以不用使用bootstrap框架，仅做参考。2）之前用的live方法，前台js报错说找不到这个方法，后来查了资料才发现，1.9以上的jquery版本已经废弃live这个方法了[javascript] view plain $(document).ready(function(e) {$('#ImportPicInput ').live( 'change', function(){})});3）文件选择框必须要有name，即<input type ="file" id="ImportPicInput" name= "myfile" />，且java代码中的变量要跟name的值保持一致，即@RequestParam MultipartFile myfile,这点非常的重要。
『陆』 使用ajaxfileupload插件，火狐https文件上传有大小限制吗
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。 Pixelcone FileuploaderjQuery fileuploader 使用 HTML5 的 API ，支持文件拖拉上传、iframe 上传的回调，支持多个文件上传表单。 Ajax Upload该插件使用 XHR 用于上传多个文件，支持老的浏览器，使用隐藏的 iframe 进行处理，提供良好用户体验，同时支持文件拖放操作。 PluploadPlupload 是一个Web浏览器上的界面友好的文件上传模块，可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。 UploadifyUploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特色总结如下：支持单文件或多文件上传，可控制并发上传的文件数在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……通过参数可配置上传文件类型及大小限制通过参数可配置是否选择文件后自动上传易于扩展，可控制每一步骤的回调函数（onSelect, onCancel……）通过接口参数和CSS控制外观
『柒』 ajaxfileupload.js 可以上传多个文件吗
恩，可以的。。。
『捌』 js ajaxfileupload.js IE8 上传文件 拒绝访问
安全限制，必须要主动点击input控件才行，触发点击是不行的，隐藏的话不要用display:none;请使用专opacity:0来隐属藏（可以鼠标点击，visibility:hidden似乎也不行），IE8的话是filter:Alpha(opacity=0);然后让input一直追随鼠标移动，实现方式有很多，你找个合适的吧。总之上传需要主动点击input——————————-如果以上方法你不接受，那么你只能用flash来实现上传了
『玖』 ajaxfileupload 怎么取消正在上传的文件
你的第二个if在第一个if里边，如果满足第一个if的条件，根本就不会进入第二个if里面去
『拾』 ajaxfileupload+springmvc上传多文件的control怎么写
1.Spring mvc a.xml配置：[html] view plain print?<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" > <!– set the max upload size1MB 1048576 –> <property name="maxUploadSize"> <value>52428800</value> </property> <property name="maxInMemorySize"> <value>2048</value> </property> </bean> b. 服务器端接收解析[java] view plain print? public void imgUpload( MultipartHttpServletRequest multipartRequest, HttpServletResponse response) throws Exception { response.setContentType("text/html;charset=UTF-8"); Map<String, Object> result = new HashMap<String, Object>(); //获取多个file for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) { String key = (String) it.next(); MultipartFile imgFile = multipartRequest.getFile(key); if (imgFile.getOriginalFilename().length() > 0) { String fileName = imgFile.getOriginalFilename(); //改成自己的对象哦！ Object obj = new Object(); //Constant.UPLOAD_GOODIMG_URL 是一个配置文件路径 try { String uploadFileUrl = multipartRequest.getSession().getServletContext().getRealPath(Constant.UPLOAD_GOODIMG_URL); File _apkFile = saveFileFromInputStream(imgFile.getInputStream(), uploadFileUrl, fileName); if (_apkFile.exists()) { FileInputStream fis = new FileInputStream(_apkFile); } else throw new FileNotFoundException("apk write failed:" + fileName); List list = new ArrayList(); //将obj文件对象添加到list list.add(obj); result.put("success", true); } catch (Exception e) { result.put("success", false); e.printStackTrace(); } } } String json = new Gson().toJson(result, new TypeToken<Map<String, Object>>() { }.getType()); response.getWriter().print(json); } //保存文件 private File saveFileFromInputStream(InputStream stream, String path, String filename) throws IOException { File file = new File(path + "/" + filename); FileOutputStream fs = new FileOutputStream(file); byte[] buffer = new byte[1024 * 1024]; int bytesum = 0; int byteread = 0; while ((byteread = stream.read(buffer)) != -1) { bytesum += byteread; fs.write(buffer, 0, byteread); fs.flush(); } fs.close(); stream.close(); return file; } 2.关于前端代码a.修改ajaxfileupload.js 先到官网下载该插件. 将源文件的createUploadForm的代码替换如下：[javascript] view plain print?createUploadForm: function(id, fileElementId, data) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); if (data) { for ( var i in data) { jQuery( '<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } for (var i = 0; i < fileElementId.length; i ++) { var oldElement = jQuery('#' + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileElementId[i]); jQuery(oldElement).attr('name', fileElementId[i]); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); } //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form; } 第一步高定b. 页面代码 html：[html] view plain print?<input type="button" value="添加附件" onclick="createInput('more');" /> <div id="more"></div> js：这里可以专门写封装类，以及给file加onchange事件判断文件格式。由于时间有限，未修改[javascript] view plain print?var count = 1; /** * 生成多附件上传框 */ function createInput(parentId){ count++; var str = '<div name="div" ><font style="font-size:12px;">附件</font>'+ ' '+ '<input type="file" contentEditable="false" id="uploads' + count + '' + '" name="uploads'+ count +'" value="" style="width: 220px"/><input type="button" value="删除" onclick="removeInput(event)" />'+'</div>'; document.getElementById(parentId).insertAdjacentHTML("beforeEnd",str); } /** * 删除多附件删除框 */ function removeInput(evt, parentId){ var el = evt.target == null ? evt.srcElement : evt.target; var div = el.parentNode; var cont = document.getElementById(parentId); if(cont.removeChild(div) == null){ return false; } return true; } 下面是2个修改多file用的js，用于显示和删除，可以于上面的合并精简代码：[javascript] view plain print?function addOldFile(data){ var str = '<div name="div' + data.name + '" ><a href="#" style="text-decoration:none;font-size:12px;color:red;" onclick="removeOldFile(event,' + data.id + ')">删除</a>'+ ' ' + data.name + '</div>'; document.getElementById('oldImg').innerHTML += str; } function removeOldFile(evt, id){ //前端隐藏域，用来确定哪些file被删除，这里需要前端有个隐藏域 $("#imgIds").val($("#imgIds").val()=="" ? id :($("#imgIds").val() + "," + id)); var el = evt.target == null ? evt.srcElement : evt.target; var div = el.parentNode; var cont = document.getElementById('oldImg'); if(cont.removeChild(div) == null){ return false; } return true; } ajax上传文件:[javascript] view plain print?function ajaxFileUploadImg(id){ //获取file的全部id var uplist = $("input[name^=uploads]"); var arrId = []; for (var i=0; i< uplist.length; i++){ if(uplist[i].value){ arrId[i] = uplist[i].id; } } $.ajaxFileUpload({ url:'xxxxx', secureuri:false, fileElementId: arrId, //这里不在是以前的id了，要写成数组的形式哦！ dataType: 'json', data: { //需要传输的数据 }, success: function (data){ }, error: function(data){ } }); }
未经允许不得转载：山九号 » ajaxfileupload多文件上传|ajaxfileupload+springmvc上传多文件的control怎么写
