上傳組件jquery
『壹』 如果我的軟體中使用了別人的插件（例如jQuery、在線編輯器、上傳組件)，那申請著作權保護會不會有問題
呵呵，是這樣：
大多數js 插件，包括jQuery 相關的插件，大都圓雀遵循MIT License和GPL License協議。
遵守這些協議的， 被授皮搜權人有權利使用、復制、修改、合並、出版發行、散布、再授權及販售軟體及軟體的副本， 在軟體和軟體的所有副本中都必須包含版權聲明和許可聲明。
也就是說，你直接使用，但最好保留一點別人的源碼版權！
你可以讓橘握早用戶看不到，但是源碼裡面必須有！
別的沒什麼。
『貳』 如何利用自定義文本框+圖片來實現文件上傳效果
用普通的js有點兒過時了。可以採用jQuery。文件上傳是網站很常見的功能之一，通過使用jQuery可以讓上傳過程更加人性化，更好的用戶體驗。
介紹20個jQuery的文件上傳插件，其中有一些是教程。
1. Plupload
Plupload 是一個Web瀏覽器上的界面友好的文件上傳模塊，可顯示上傳進度、圖像自動縮略和上傳分塊。可同時上傳多個文件。
2. The KillersAjax Upload
該插件使用 XHR 用於上傳多個文件，支持上傳進度顯示，但不支持 IE
3. SWFUpload jQuery Plugin
4. AjaxFileUpload
5. Uploadify
Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特色總結如下：
支持單文件或多文件上傳，可控制並發上傳的文件數
在伺服器端支持各種語言與之配合使用，諸如php,.NET,java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件後自動上傳
易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）
通過介面參數和CSS控制外觀
6. jQuery Multiple File Upload Plugin
7. jqUploader
jqUploader 是實現文件上傳的jQuery插件
8. jQuery Form Plugin
jQuery Form Plugin 是一個擴展表單操作的 jQuery 插件，直接文件上傳表單
9. jQuery Form Plugin
10. jqswfupload
11. uploadprogress
12. jQuery File Upload
13. Multiple File Upload With Progress Bar Using jQuery
14. jQuery.upload
一個簡單的 Ajax 文件上傳插件
15. Ajax File Upload Script Using jQuery
jQuery File Uploader 使用 iframe 來處理上傳過程
16. jQuery Custom File Upload Input
17. Image Upload and Cropping with PHP and Jquery
18. PHP & jQuery image upload and crop
19. AJAX upload progress bars with jQuery, Django and nginx
20. Uploading Files with AJAX
21. AJAX Multiple File Upload Form Using jQuery
22. FancyUpload – Swiff meets Ajax (v3.0)
FancyUpload是一個採用Flash與Ajax（MooTools）技術實現包含上傳進度條的多文件上傳組件，類似於SWFUpload。MooTools是一個與prototype相類似的一個Ajax框架。
去網路，搜索這裡面的名稱，就能找到了。 非常強大。
『叄』 jquery photoclip 怎麼提交
jquery截取圖片後，ajax非同步提交該圖片
如何用form非同步提交已經截取的圖片呢？因為後台(springMVC)用到組件上傳圖片，需要圖片類型list。
解決思路：截取圖片是base64，將base64存入form的input，type=file中，提交form即可。
[html] view plain
<script type="text/javascript" src="assets/wap/kuaiqin/js/jquery-1.12.2.min.js" ></script>
<script src="assets/wap/kuaiqin/js/iscroll-zoom.js"></script>
<script src="assets/wap/kuaiqin/js/hammer.js"></script>
<script src="assets/wap/kuaiqin/js/jquery.photoClip.js"></script>
<script type="text/javascript" src="assets/wap/kuaiqin/js/xx.js"></script>
[html] view plain
<img id="xiaotu" src="assets/wap/kuaiqin/img/share_feng.jpg" style="width:65px;height:65px;position:absolute;left:18px;top:-25px;">
[html] view plain
<input type="file" id="face_upload" name="temp_img" style="display:none">
<form method="post" encType="multipart/form-data"></form>
[html] view plain
<!-- 圖片處理 -->
<div id="img_screen" style="position:absolute;top:0;width:100%;background:#000;overflow:hidden;display:none;"></div>
<div id="img_box" style="position:absolute;top:0;width:100%;display:none;margin-top:20%;">
<div id="clipArea" style="margin:20px;height: 300px;"></div>
</div>
<button id="clipBtn" style="position:absolute;top:0;right:0;border:0;color:#fff;background:#000;display:none;">確定</button>
<!-- end -->
[html] view plain
$("#xiaotu").click(function(){//點擊圖片彈出文件夾
$("#face_upload").click();
});
[html] view plain
$("#face_upload,#smrz_upload").change(function(){//選擇圖片之後，將圖片放到截取框中截取
var objUrl=getObjectURL(this.files[0]);
if(objUrl){
$(window).scrollTop(0);
$("#img_screen").show();
$("#img_box").show();
$("#clipBtn").show();
}
})
[html] view plain
function getObjectURL(file){//獲取選擇圖片的base64
var url=null
if(window.createObjectURL!=undefined){ // basic
url=window.createObjectURL(file)
}else if(window.URL!=undefined){ // mozilla(firefox)
url=window.URL.createObjectURL(file)
} else if(window.webkitURL!=undefined){ // webkit or chrome
url=window.webkitURL.createObjectURL(file)
}
return url
}
[html] view plain
var base64=null;
$("#img_screen").css("height",$(window).height());
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#face_upload",
ok: "#clipBtn",
clipFinish: function(dataURL) {
$('#xiaotu').attr("src", dataURL);
$('#datu').attr("src", dataURL);
base64=dataURL;
}
});
$("#clipBtn").click(function(){
convertToFile(base64);
});
[html] view plain
function convertToFile(base64Codes){//將base64轉化blob，並放到form中
var form=document.forms[0];
var formData = new FormData(form);
var img_name=$("#face_upload").val();
formData.append("img",convertBase64UrlToBlob(base64Codes),img_name);//img是input的name屬性，與後台的對應即可
$.ajax({//提交表單，非同步上傳圖片
url : "api/public/uploadImg",
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告訴jQuery不要去處理發送的數據
contentType : false, // 告訴jQuery不要去設置Content-Type請求頭
success:function(data){
imgurl=data.imgs[0];
subuserinfo_face(imgurl);
}
});
}
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭，並轉換為byte
//處理異常,將ascii碼小於0的轉換為大於0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
『肆』 普通頁面中的用css渲染的文件上傳組件正常顯示，把其放在jquerymobile中怎麼都沒效果了
應該是互相沖突了
使用火銷蘆碧狐的firebug查找沖突原因
更改載入css的順序，後者自己再添加虧舉高優先順序的css代嘩罩碼
『伍』 bex5 文檔上傳 用什麼組件
、文件傳面：
（1）Uploadify簡單說基於Jquery款文件傳插件
（2）Pluploadweb瀏覽器界面友文件傳模塊顯示傳進度、圖像自縮略傳塊同傳文件
二、圖表製作面：
（1）D3.js 基於數據操作文檔JavaScript庫D3幫助使用HTMLSVGCSS展現數據D3需要使用某特定框架重點於主流瀏覽器兼容同結合強虛擬化組件數據驅式操作DOMD3支持主流瀏覽器包括IE8及前版本D3測試Firefox、Chrome、Safari、OperaIE9D3部組件舊瀏覽器運行
（2）JSCharts 款免費源JavaScript圖表腳本庫支持XML數據格式幫助用戶快螞頃速創建各類圖表需具備相應技術知識甚至用操作些繁瑣專業工具省省力
三、Jquery ui面：
（1）Chico UI jQuery UI Chico UI 包含 auto-complete, blink, carousel, countdown, date-picker, dropdown, expand, calendar 等諸逐漸同提供 CSS 布局框伍仔架用於實現網頁布腔物汪局表格
（2）jQuery UI[1] jQuery 基礎源 JavaScript 網頁用戶界面代碼庫包含底層用戶交互、畫、特效更換主題視控制項我直接用構建具交互性web應用程序所插件測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, GoogleChrome
四、表格組件面：
（1）Flexigrid類似於Ext Gird基於jQuery發Grid具功能包括：調整列寬合並列標題頁排序顯示/隱藏表格等Flexigrid顯示數據能夠通Ajax獲取或者普通表格轉換
（2）ParamQuery grid輕量級jQuery網格插件基於用於用戶界面控制、具致API優秀設計模式jQueryUI Widget factory創建能夠網頁展示各種類似於ExcelGoogle Spreadsheet效網格
『陸』 如何用 jQuery 直接傳文件至七牛
這個一般需要配合上傳組件來完成比如plupload,jqupload等等
『柒』 jquery plupload 上傳 單個文件怎麼限制
//設置只能單乎坦選文件
multi_selection: false,
//組件添加文件事件中，刪除之前豎帆已添歲纖桐加的文件
FilesAdded:function(up,files){
$.each(up.files,function(i,file){
if(up.files.length<=1){
return;
}
up.removeFile(file);
});
}
『捌』 jquery如何將頁面生成的圖片上傳到伺服器
File Upload組件啊，是同步還是非同步呢
html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 伺服器地址,成功返回,失敗返回參數格式依照jquery.ajax習慣;* 其他參數同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '選擇文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上傳的文件數量, 總文件大小,單個文件大小(單位位元組);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>