上传组件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>