js上傳插件
Ⅰ 求一款jQuery或js多圖上傳插件
多圖上傳沒問題，但是想上傳後可以刪除，可以修改名稱。這個只能你自己來實現。之前專門寫了一個上傳插件希望能幫到你
http://blog.csdn.net/sq111433/article/details/16872403
Ⅱ js超大文件上傳如何實現
利用File文件介面將文件切成順序的若干小片，然後上傳到伺服器，全部上傳完後由服務端進行合並和校驗
Ⅲ 幾種js實現的動態多文件上傳
方式一：事先寫好多個input.在點擊時才顯示。也就是說上傳的最大個數是寫死了的。
html
<p>
<a href='#' onclick='javascript:viewnone(more1)'> 添加附件 </a>
<div id='more1' style='display:none'>
<input type="file" name="attach1" size="50"javascript:viewnone(more2)>
</span>
</div>
<div id='more2' style='display:none'>
<input type="file" name="attach2" size="50"'>
</div>
</p>
js
<SCRIPT language="javascript">
function viewnone(e){
e.style.display=(e.style.display=="none")?"":"none";
}
</script>
方式二:這種方式的動態多文件上傳是實現了的，很簡單的，不說廢話看code
html
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="刪除附件" onclick="deleteInput()">
<span id="upload"></span>
js
<script type="text/javascript">
var attachname = "attach";
var i=1;
function addInput(){
if(i>0){
var attach = attachname + i ;
if(createInput(attach))
i=i+1;
}
}
function deleteInput(){
if(i>1){
i=i-1;
if(!removeInput())
i=i+1;
}
}
function createInput(nm){
var aElement=document.createElement("input");
aElement.name=nm;
aElement.id=nm;
aElement.type="file";
aElement.size="50";
//aElement.value="thanks";
//aElement.onclick=Function("asdf()");
if(document.getElementById("upload").appendChild(aElement) == null)
return false;
return true;
}
function removeInput(nm){
var aElement = document.getElementById("upload");
if(aElement.removeChild(aElement.lastChild) == null)
return false;
return true;
}
</script>
方式三：動態多文件上傳，只是在oFileInput.click();這個地方，這樣做就不能上傳這個文件了，因為發現它在上傳之時就把這個input中的文件置空了。很可能是為了安全著想吧！
另外還有一點就是說，click()只有在ie中才能正常運行。
雖說這種方式最終沒能實現上傳，但還是留下來參考，看看是否有人可以真正實現上傳。
html
<A href="javascript:newUpload();">添加附件</A>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
<TBODY id="fileList"></TBODY>
</TABLE>
<DIV id="uploadFiles" style="display:block"></DIV>
js
<SCRIPT language="javascript">
//---新建上傳
function newUpload(){
var oFileList = document.getElementById("fileList");
var fileCount = oFileList.childNodes.length + 1;
var oFileInput = newFileInput("upfile_" + fileCount);
if(selectFile(oFileInput)){
addFile(oFileInput);
}
}
//----選擇文件
function selectFile(oFileInput){
var oUploadFiles = document.getElementById("uploadFiles");
oUploadFiles.appendChild(oFileInput);
oFileInput.focus();
oFileInput.click();//不能這樣做，可能是為了安全著想吧！
var fileValue = oFileInput.value;
if(fileValue == ""){
oUploadFiles.removeChild(oFileInput);
return false;
}
else
return true;
}
//---新建一個文件顯示列表
function addFile(oFileInput){
var oFileList = document.getElementById("fileList");
var fileIndex = oFileList.childNodes.length + 1;
var oTR = document.createElement("TR");
var oTD1 = document.createElement("TD");
var oTD2 = document.createElement("TD");
oTR.setAttribute("id","file_" + fileIndex);
oTR.setAttribute("bgcolor","#FFFFFF");
oTD1.setAttribute("width","6%");
oTD2.setAttribute("width","94%");
oTD2.setAttribute("align","left");
oTD2.innerText = oFileInput.value;
oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ');">刪除</A>';
oTR.appendChild(oTD1);
oTR.appendChild(oTD2);
oFileList.appendChild(oTR);
}
//---移除上傳的文件
function removeFile(fileIndex){
var oFileInput = document.getElementById("upfile_" + fileIndex);
var oTR = document.getElementById("file_" + fileIndex);
uploadFiles.removeChild(oFileInput);
fileList.removeChild(oTR);
}
//---創建一個file input對象並返回
function newFileInput(_name){
var oFileInput = document.createElement("INPUT");
oFileInput.type = "file";
oFileInput.id = _name;
oFileInput.name = _name;
oFileInput.size="50";
//oFileInput.setAttribute("id",_name);
//oFileInput.setAttribute("name",_name);
//oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>';
//alert(oFileInput.outerHTML);
return oFileInput;
}
</SCRIPT>
Ⅳ JS如何自動添加上傳文件
如果是上傳文件，不可能的。
瀏覽器有安全限制，不允許腳本修改enctype為"multipart/form-data"的form內容,
Ⅳ 如何用js向上傳控制項添加內容
document.getElementByID()
區分大小寫
正確為：document.
getElementById
()
設置的話那就不行了，這個值是只讀的，沒辦法的。
Ⅵ 請高手給一個JS多文件上傳的例子（必須兼容IE）解決追加50分。請看補充。
一、Servlet實現文件上傳，需要添加第三方提供的jar包
下載地址：
1) commons-fileupload-1.2.2-bin.zip: 點擊打開鏈接
2) commons-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>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<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 javaxservlethttpHttpServlet;
import ;
import ;
import ;
import ;
import ;
import ;
/**
*
* @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, HttpServletResponse response)
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 [] buf = new byte[1024] ;
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, response);
}
}
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>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<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結果頁面：
以上就是本文的全部
Ⅶ 圖片上傳兼容性好的js插件 哪位大神可以幫忙呢
網路的http://fex..com/webuploader/
一般的上傳插件用的是flash插件，在手機端會有問題，手機的瀏覽器一般沒flash
webuploader是智能判斷，默認用hmtl5來上傳，不支持html5再使用flash，這樣老的瀏覽器和手機瀏覽器都能支持。
Ⅷ jquery.fileUpload.js文件上傳問題
了解，fileuploader方法需要先初始化，然後才能觸發上傳，並不需要你手動觸發change事件
你只需
html
<form>
file:<inputtype="file"id="file"name="file">
</form>
js
$('#file').on('change',function(){
//這里可以做校驗，返回false就不會觸發下面的上傳插件，否則就會觸發上傳
if(!this.value||this.value.indexOf('.jpg')==-1){
returnfalse;
}
});
//初始化上傳插件
$('#file').fileupload({
autoUpload:true,//這里為true，則選中文件後就會自動上傳
url:'',
done:$.noop,
fail:$.noop
});
Ⅸ js不用插件上傳文件
你需要明白，上傳文件不是js做的事情，所以想做到無刷新上傳必須要使用插件，否則就需要你自己來實現，自己實現起來就沒那麼容易了，之前專門寫的一個用於上傳文件的js插件，希望能幫到你
http://blog.csdn.net/sq111433/article/details/16872403
Ⅹ 誰有jquery的上傳插件ajaxupload.3.5.js文件，傳到[email protected],謝謝
<script type="text/javascript" src="<?php echo UPLOAD; ?>/js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="<?php echo UPLOAD; ?>/styles.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#upload1');
var status=$('#status1');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-image1.php',
name: 'image1',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('僅支持： JPG, PNG 或 GIF 格式');
return false;
}
status.text('上傳中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files1').html('<img src="<?php echo UPLOAD; ?>/uploads/image/small_image/'+file+'" alt="" /><br /> <input type="text" name="image1" value="<?php echo UPLOAD; ?>/uploads/image/small_image/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files1').text('建議圖片尺寸 : 寬=80px,高=80px ').addClass('error');
} else{
$('<li></li>').appendTo('#files1').text(file).addClass('error');
}
}
});
var btnUpload=$('#upload2');
var status=$('#status2');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-image2.php',
name: 'image2',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('僅支持： JPG, PNG 或 GIF 格式');
return false;
}
status.text('上傳中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files2').html('<img src="<?php echo UPLOAD; ?>/uploads/image/large_image/'+file+'" alt="" /><br /> <input type="text" name="image2" value="<?php echo UPLOAD; ?>/uploads/image/large_image/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files2').text('正確的圖片尺寸是 : 寬=640px,高=358px ').addClass('error');
} else{
$('<li></li>').appendTo('#files2').text(file).addClass('error');
}
}
});
var btnUpload=$('#upload3');
var status=$('#status3');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(zip)$/.test(ext))){
// extension is not allowed
status.html('<div class="error">僅支持zip格式</div>');
return false;
}
status.text('上傳中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files3').html('<img src="<?php bloginfo('template_url'); ?>/images/icon_zipbox_128.png" alt="" /><br /> <input type="text" name="download_file" value="<?php echo UPLOAD; ?>/uploads/file/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files3').text('上傳文件不應大於 10MB. ').addClass('error');
} else{
$('<li></li>').appendTo('#files3').text(file).addClass('error');
}
}
});
});
$(function(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// call ajax
$("#sub_cat").empty();
$.ajax({
url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
type:'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
success:function(results)
{
// alert(results);
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(results);
}
});
}
);
});
</script>