js文件上传fileupload（怎样用JS控制文件上传时FILE控件内默认的文件类型）

本文目录

• 怎样用JS控制文件上传时FILE控件内默认的文件类型
• jQuery fileupload 多文件上传
• js如何上传文件
• 怎么用js来获取 fileupload中的上传文件的文件名
• jquery.fileUpload.js文件上传问题
• jsf 中 rich:fileUpload 控件怎样用js获得上传文件的客户端路径
• 请高手给一个JS多文件上传的例子（必须兼容IE）解决追加50分请看补充
• jquery file upload怎么使用
• JS如何实现文件上传服务器端怎么接受上传用什么语言实现服务器端Java或ObjC可以吗

怎样用JS控制文件上传时FILE控件内默认的文件类型

有两种方式，
1、用fileupload控件在后台判断
FileUpload1.FileContent.Length判断大小，
System.IO.Path.GetExtension(FileUpload1.FileName)获取文件后缀
2、用jquery上传控件，可以直接判断类型和大小
另外js也可以在前台判断文件类型，但不能获取文件大小，需要引用插件

jQuery fileupload 多文件上传

//js
$(function () {
//文件上传地址
***隐藏网址***
***隐藏网址***
//初始化，主要是设置上传参数，以及事件处理方法(回调函数)
$(’#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) {//设置上传进度事件的回调函数
var progress = parseInt(data.loaded / data.total * 5, 10);
$(’#progress .bar’).css(
’width’,
progress + ’%’
);
}
});
}); 
//上传至服务后，服务器返回json数据--上传图片的地址。
//html
《label for="text"》上传图片《/label》
《input id="fileupload" type="file" name="files" data-url="《span style="color:#ff6666;"》jquery_save_img《/span》" multiple》
//data-url为上传至服务器端的处理接口/地址，可替换js中的url
//服务器端
function jquery_save_img()  
    {  
        $arrType=array(’image/jpg’,’image/gif’,’image/png’,’image/bmp’,’image/pjpeg’,’image/jpeg’);  
        $max_size=’500000000000’;      // 最大文件限制（单位：byte）  
        $upfile=’./uploads’; //图片目录路径  
        $file=$_FILES;  
  
        /* 
        echo ’filename:’.$file.’;《br /》’; 
        echo ’size:’.$file.’;《br /》’; 
        echo ’type:’.$file.’;《br /》’; 
        echo ’name:’.$file.’;《br /》’; 
        */  
          
        if($_SERVER==’POST’){ //判断提交方式是否为POST  
            if(!is_uploaded_file($file)){ //判断上传文件是否存在  
                echo "《font color=’#FF0000’》文件不存在！《/font》";  
                exit;  
            }  
  
            if($file》$max_size){  //判断文件大小是否大于500000字节  
                echo "《font color=’#FF0000’》上传文件太大！《/font》";  
                exit;  
            }   
            if(!in_array($file,$arrType)){  //判断图片文件的格式  
                echo "《font color=’#FF0000’》上传文件格式不对！《/font》xxx:".$file;  
                exit;  
            }  
            if(!file_exists($upfile)){  // 判断存放文件目录是否存在  
                mkdir($upfile,0777,true);  
            }   
            $imageSize=getimagesize($file);  
            $img=$imageSize;  
            $fname=$file;  
            $ftype=explode(’.’,$fname);  
            $picName=$upfile."/cloudy".$fname;  
  
            if(file_exists($picName)){  
                //echo "《font color=’#FF0000’》同文件名已存在！《/font》";  
                //exit;  
            }  
            if(!move_uploaded_file($file,$picName)){    
                echo "《font color=’#FF0000’》移动文件出错！《/font》";  
                exit;  
            }  
            else{  
            /* 
                echo "《font color=’#FF0000’》图片文件上传成功！《/font》《br/》"; 
                echo "《font color=’#0000FF’》图片大小：$img《/font》《br/》"; 
                echo "图片预览：《br》《div style=’border:#F00 1px solid; width:200px;height:200px’》 
                《img src=\"".$picName."\" width=200px height=200px》".$fname."《/div》"; 
            */  
***隐藏网址***
            }  
        }  
      
    }

js如何上传文件

js采用File API 来上传文件的。

File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 《input type=”file” … /》 文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。

File API 简单示例

《body》
《h1》File API Demo《/h1》
《p》
《!-- 用于文件上传的表单元素 --》
《form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();"》
《p》Upload File: 《input type="file" name="file" /》《/p》
《p》《input type="submit" value="Submit" /》《/p》
《/form》
《div》Progessing (in Bytes): 《span id="bytesRead"》
《/span》 / 《span id="bytesTotal"》《/span》
《/div》
《/p》
《/body》
运行效果：

怎么用js来获取 fileupload中的上传文件的文件名

在firefox上，input（type=file）默认获取到的value值就是文件名。
在IE上，input（type=file）默认获取到的value值是路径。
因此用js来获取fileupload中的上传文件的文件名需要多方面考虑。
示例代码：
《form action="" method="get" onSubmit="return false;"》
《input type="text" name="test" id="test"》
《input type="file" name="testFile" onChange="if(this.value)insertTitle(this.value);"》
《input type="submit" value="提交"》
《/form》
《script language="javascript"》
function insertTitle(path){
var test1 = path.lastIndexOf("/"); //对路径进行截取
var test2 = path.lastIndexOf("\\"); //对路径进行截取
var test= Math.max(test1, test2)
if(test《0){
document.getElementById("test").value = path;
}else{
document.getElementById("test").value = path.substring(test + 1); //赋值文件名
}
}
《/script》

jquery.fileUpload.js文件上传问题

了解，fileuploader方法需要先初始化，然后才能触发上传，并不需要你手动触发change事件

你只需

html

《form》
  file : 《input type="file" id="file" name="file"》
《/form》

js

$(’#file’).on(’change’ , function(){
  //这里可以做校验，返回false就不会触发下面的上传插件，否则就会触发上传
  if(!this.value || this.value.indexOf(’.jpg’) == -1){
    return false;
  }
});
//初始化上传插件
$(’#file’).fileupload({
  autoUpload : true, //这里为true，则选中文件后就会自动上传
  url : ’’,
  done : $.noop,
  fail : $.noop
});

jsf 中 rich:fileUpload 控件怎样用js获得上传文件的客户端路径

　　首先, rich:fileUpload 是通过 fileUploadListener 来实现图片上传的,它是把上传的图片直接转换为 UploadedFile ,而这个类中没有路径这个属性,所以直接通过rich:fileUpload 应该是没法用js直接拿到路径的.
　　如果使用js/jquery的图片上传的方法,可能可以拿到图片路径,你可以试试

请高手给一个JS多文件上传的例子（必须兼容IE）解决追加50分请看补充

一、Servlet实现文件上传，需要添加第三方提供的jar包
下载地址：
1) comm***-fileupload-1.2.2-bin.zip: 点击打开链接
2) comm***-io-2.3-bin.zip: 点击打开链接
接着把这两个jar包放到 lib文件夹下：
二：文件上传的表单提交方式必须是POST方式，
编码类型：enctype="multipart/form-data"，默认是 application/x-www-form-urlencoded
比如：
《form action="FileUpLoad"enctype="multipart/form-data"method="post"》
三、举例：
1.fileupload.jsp
《%@ page language="java" import="javautil*" pageEncoding="UTF-8"%》
《%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%》
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN"》
《html》
《head》
《base href="《%=basePath%》"》
《title》My JSP ’fileuploadjsp’ starting page《/title》
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
《!--
《link rel="stylesheet" type="text/css" href="stylescss"》
--》
《/head》
《body》
《!-- enctype 默认是 application/x-www-form-urlencoded --》
《form action="FileUpLoad" enctype="multipart/form-data" method="post" 》
用户名：《input type="text" name="usename"》 《br/》
上传文件：《input type="file" name="file1"》《br/》
上传文件： 《input type="file" name="file2"》《br/》
《input type="submit" value="提交"/》
《/form》
《/body》
《/html》
2.实际处理文件上传的 FileUpLoad.java
package comservletfileupload;
import javaioFile;
import javaio*;
import javaioIOException;
import javaioPrintWriter;
import javautilList;
import javaxservletServletException;
***隐藏网址***
***隐藏网址***
***隐藏网址***
import orgapachecomm***fileuploadFileItem;
import orgapachecomm***fileuploadFileUploadException;
import orgapachecomm***fileuploaddiskDiskFileItemFactory;
import orgapachecomm***fileuploadservletServletFileUpload;
/**
*
* @author Administrator
* 文件上传
* 具体步骤：
* 1）获得磁盘文件条目工厂 DiskFileItemFactory 要导包
* 2） 利用 request 获取 真实路径 ，供临时文件存储，和 最终文件存储 ，这两个存储位置可不同，也可相同
* 3）对 DiskFileItemFactory 对象设置一些 属性
* 4）高水平的API文件上传处理 ServletFileUpload upload = new ServletFileUpload(factory);
* 目的是调用 parseRequest（request）方法 获得 FileItem 集合list ，
*
* 5）在 FileItem 对象中 获取信息， 遍历， 判断 表单提交过来的信息 是否是 普通文本信息 另做处理
* 6）
* 第一种 用第三方 提供的 itemwrite( new File(path,filename) ); 直接写到磁盘上
* 第二种 手动处理
*
*/
public class FileUpLoad extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResp***e resp***e)
throws ServletException, IOException {
requestsetCharacterEncoding("utf-8"); //设置编码
//获得磁盘文件条目工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//获取文件需要上传到的路径
String path = requestgetRealPath("/upload");
//如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
//设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
/**
* 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上，
* 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 tem 格式的
* 然后再将其真正写到 对应目录的硬盘上
*/
factorysetRepository(new File(path));
//设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
factorysetSizeThreshold(1024*1024) ;
//高水平的API文件上传处理
ServletFileUpload upload = new ServletFileUpload(factory);
try {
//可以上传多个文件
List《FileItem》 list = (List《FileItem》)uploadparseRequest(request);
for(FileItem item : list)
{
//获取表单的属性名字
String name = itemgetFieldName();
//如果获取的 表单信息是普通的 文本 信息
if(itemisFormField())
{
//获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的
String value = itemgetString() ;
requestsetAttribute(name, value);
}
//对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些
else
{
/**
* 以下三步，主要获取 上传文件的名字
*/
//获取路径名
String value = itemgetName() ;
//索引到最后一个反斜杠
int start = valuelastIndexOf("\\");
//截取 上传文件的 字符串名字，加1是 去掉反斜杠，
String filename = valuesubstring(start+1);
requestsetAttribute(name, filename);
//真正写到磁盘上
//它抛出的异常 用exception 捕捉
//itemwrite( new File(path,filename) );//第三方提供的
//手动写的
OutputStream out = new FileOutputStream(new File(path,filename));
InputStream in = itemgetInputStream() ;
int length = 0 ;
byte ;
Systemoutprintln("获取上传文件的总共的容量："+itemgetSize());
// inread(buf) 每次读到的数据存放在 buf 数组中
while( (length = inread(buf) ) != -1)
{
//在 buf 数组中 取出数据 写到 （输出流）磁盘上
outwrite(buf, 0, length);
}
inclose();
outclose();
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
eprintStackTrace();
}
catch (Exception e) {
// TODO Auto-generated catch block
//eprintStackTrace();
}
requestgetRequestDispatcher("filedemojsp")forward(request, resp***e);
}
}
System.out.println("获取上传文件的总共的容量："+item.getSize());
3.filedemo.jsp
《%@ page language="java" import="javautil*" pageEncoding="UTF-8"%》
《%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%》
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN"》
《html》
《head》
《base href="《%=basePath%》"》
《title》My JSP ’filedemojsp’ starting page《/title》
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
《!--
《link rel="stylesheet" type="text/css" href="stylescss"》
--》
《/head》
《body》
用户名：${requestScopeusename } 《br/》
文件：${requestScopefile1 }《br/》
${requestScopefile2 }《br/》
《!-- 把上传的图片显示出来 --》
《img alt="go" src="upload/《%=(String)requestgetAttribute("file1")%》 " /》
《/body》
《/html》
4结果页面：
以上就是本文的全部

jquery file upload怎么使用

使用方法：
1. 需要加载的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代码：
?
1
《input id="fileupload" type="file" name="files" data-url="server/php/" multiple》
3. js代码：
?
12345678910
$(function () {$(’#fileupload’).fileupload({dataType: ’json’,done: function (e, data) {$.each(data.result.files, function (index, file) {$(’《p/》’).text(file.name).appendTo(document.body);});}});});
3.1 显示上传进度条：　
?
123456789
$(’#fileupload’).fileupload({　progressall: function (e, data) {　var progress = parseInt(data.loaded / data.total * 100, 10);　$(’#progress .bar’).css(　’width’,　progress + ’%’　);　}　});
3.2 需要一个《div》容器用来显示进：
?
123
《div id="progress"》　《div class="bar" style="width: 0%;"》《/div》　《/div》
4. API
4.1 Initialization：
在上传按钮上调用fileupload()方法;
示例：
$(’#fileupload’).fileupload();
4.2 Opti*** :
1: url：请求发送的目标url
Type: string
Example: ’/path/to/upload/handler.json’
2.Type: 文件上传HTTP请求方式，可以选择“POST”，“PUT”或者"PATCH",
默认"POST"
Type: string
Example: ’PUT’
3. dataType:希望从服务器返回的数据类型，默认"json"
Type: string
Example: ’json’
4. autoUpload:默认情况下，只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。
Type: boolean
Default: true
5. acceptFileTypes：允许上传的的文件类型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上传文件大小
Example: 999000 (999KB) //单位：B
7. minFileSize:最小上传文件大小
Example: 100000 (100KB) //单位：B
8.previewMaxWidth : 图片预览区域最大宽度
Example: 100 //单位：px
4.3 Callback Opti***:
使用方法一：函数属性
实例：
?
123456789101112
$(’#fileupload’).fileupload({　　drop: function (e, data) {　　$.each(data.files, function (index, file) {　　alert(’Dropped file: ’ + file.name);　　});　　},　　change: function (e, data) {　　$.each(data.files, function (index, file) {　　alert(’Selected file: ’ + file.name);　　});　　}　　});
使用方法二：绑定事件**函数
实例：
?
123
$(’#fileupload’)　　　　.bind(’fileuploaddrop’, function (e, data) {/* ... */})　　　　.bind(’fileuploadchange’, function (e, data) {/* ... */});
每个事件名称都添加前缀：”fileupload”;
注意推荐使用第二种方法。
常用的回调函数：
1. add: 当文件被添加到上传组件时被触发
?
1
$(’#fileupload’).bind(’fileuploadadd’, function (e, data) {/* ... */});
或者$(’#fileupload’).on(’fileuploadadd’, function (e, data) {/* ... */});
2. processalways: 当一个单独的文件处理队列结束（完成或失败时）触发
3. progressall: 全局上传处理事件的回调函数
Example:
?
1234567
$(’#fileupload’).on(’fileuploadprogressall’, function (e, data) { //进度条显示var progress = parseInt(data.loaded / data.total * 100, 10);$(’#progress .progress-bar’).css(’width’,progress + ’%’);});
4. fail : 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发。
5. done : 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发。
6. always : 上传请求结束时（成功，错误或者中止）都会被触发。

JS如何实现文件上传服务器端怎么接受上传用什么语言实现服务器端Java或ObjC可以吗

• 使用java就可以

• 服务器端用php

• 使用jquery 的ajaxupload.js 插件， 后台你 java 或 php 都可以：

  如：

  页面：

  《button id="uploadBtn"》《/button》

  js 部分

  var btn = $(’#uploadBtn’);
  new AjaxUpload(btn, {
  action:url,
  name:’files’,
  multiple: true,
  resp***eType: ’json’,
  onSubmit : function(file, ext) {
  if (ext && /^(JPG|PNG|JPEG|GIF|BMP|jpg|pne|jpeg|gif|bmp)$/.test(ext)){
  this.setData({
  ’info’:’文件类型正确’
  });
  } else {
  sys_msg(’文件类型错误’, ’只能上传类型为：JPG|PNG|JPEG|GIF|BMP 的图片文件!’);
  return false;               
  }
  $(’#uploads_span’).html(sys_loading_img);
  this.disable();
  },
  onComplete: function(files, resp***e){
  if (’error’ == resp***e.result)
  sys_msg(’失败’, ’上传文件失败，请检查文件名是否正确!’);
  else if (’file_type_error’ == resp***e.result)
  sys_msg(’文件类型错误’, ’只能上传类型为：JGP、GIF、BMP、ICO、PNG的文件!’);
  else {
  var tr = $(’#’ + color);// 找到对应的TR
  $.each(resp***e.list,function(e) {
  tr.find(’img.img’).attr({’src’:’upload/commodity/’+ this.uuid +’.’ + this.ext}).end()
    .find(’input.img-path’).attr({’value’: this.uuid +’.’ + this.ext}).end();
  return false;//这里只取第一张
  });
  this.enable();
  }  
  }
  });

  java 后台
  

  @RequestMapping(Url.UPLOAD)
  public void fileUpload(HttpServletRequest request, HttpServletResp***e resp***e) {
  MultipartHttpServletRequest multipartRequestd = (MultipartHttpServletRequest) request;
  List《MultipartFile》 files = multipartRequestd.getFiles("files");
  StringBuffer result = new StringBuffer("");
  if (null != files && files.size() 》 0) {
  String name = null;
  String ext = null;
  String uuid = null;
  String path = null;
  String savePath = null;
  UUID u = null;
  for (MultipartFile mf : files) {
  name = mf.getOriginalFilename();
  if (isNotNull(name)) {
  ext = name.substring(name.lastIndexOf(’.’) + 1);
  if (!ext.toUpperCase().equals(Sys.JPG)
  && !ext.toUpperCase().equals(Sys.GIF)
  && !ext.toUpperCase().equals(Sys.JPEG)
  && !ext.toUpperCase().equals(Sys.BMP)
  && !ext.toUpperCase().equals(Sys.PNG)) {
  print(resp***e, Msg.J_FILE_TYPE_ERROR);
  return;
  }
  name = name.substring(0, name.lastIndexOf(’.’));
  u = UUID.randomUUID();
  uuid = u.toString().replace("-", "");
  path = FILE_UPLOAD_PATH + uuid + Sys.DOT + ext;
  savePath = ConfigParm.getProjectPath() + path;
  FileOutputStream fo;
  int size = 0;
  try {
  fo = new FileOutputStream(savePath);
  size = mf.getBytes().length;
  fo.write(mf.getBytes());
  fo.close();
  } catch (Exception e) {
  print(resp***e, Msg.ERROR);
  e.printStackTrace();
  }
  FileInfo f = new FileInfo();
  f.setDeleted(false);
  f.setExt(ext);
  f.setName(name);
  f.setCt(new Date());
  f.setModule(Parm.COMMODITY);
  f.setCu(cu_code(request));
  f.setOc(cu_organCode(request));
  f.setSize(size);
  f.setUuid(uuid);
  commodityDAO.add(f);
  result.append("{\"name\":\"" + f.getName() + "\", \"uuid\":\""+ f.getUuid() +"\",\"ext\":\""+ f.getExt() +"\"},");
  }
  }
  result.insert(0, "{\"result\":\"success\",\"list\":}");
  print(resp***e, result.toString());
  } else {
  result.append("{\"result\":\"not_find_file\"}");
  }
  }

  具体的你可以百度搜一下 ajaxupload.js 插件的用法。都有说的很清楚的。