jquery文件上传插件
1. 如何利用自定义文本框+图片来实现文件上传效果
用普通的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框架。
去网络，搜索这里面的名称，就能找到了。 非常强大。
2. 请问ASP要如何使用jquery的插件uploadify，官网上的只有PHP的
Uploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特色总结如下：
支持单文件或多文件上传，可控制并发上传的文件数
在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展，可控制每一步骤的回调函数(onSelect, onCancel……)
通过接口参数和CSS控制外观
更多……
相关链接
Uploadify主页地址：http://www.uploadify.com/ 在该页面你可以了解到关于他的更多内容。
Uploadify在线演示：在线Demo
Uploadify配置参数及接口文档：http://www.uploadify.com/documentation
Uploadify插件下载地址：http://www.uploadify.com/download
使用方法
下载插件安装包后，可以看到里面的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处理文件，官方仅提供了php版的)
引用了插件文件后，在页面中做如下调用：
//声明一个普通的html文件上传控件，并指定id
<input type="file" name="fileInput" id="fileInput" />
//将声明的普通上传控件与Uploadify插件绑定
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
//以下参数均是可选
'uploader' : 'uploader.swf', //指定上传控件的主体文件，默认‘uploader.swf’
'script' : 'upload.php', //指定服务器端上传处理文件，默认‘upload.php’
'cancelImg' : 'cancel.png', //指定取消上传的图片，默认‘cancel.png’
'auto' : true, //选定文件后是否自动上传，默认false
'folder' : '/uploads' //要上传到的服务器路径，默认‘/’
'muti' : true, //是否允许同时上传多文件，默认false
'fileDesc' : 'rar文件或zip文件' //出现在上传对话框中的文件类型描述
'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
'sizeLimit': 86400 //控制上传文件的大小，单位byte
'simUploadLimit' :5 //多文件上传时，同时上传文件数目限制
});
});
</script>
上面列出了我认为常用的配置选项，此外还有很多参数可配置，参考官方文档
通过调用相关功能函数，声明功能按钮。
例如声明上传功能按钮(自动上传时不需要)：
<a href="javascript:$('#fileInput').fileUploadStart();">上传文件</a>
声明取消多文件上传时上传队列：
<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上传队列</a>
文章来自中国建站：http://www.jz123.cn/text/2419333.html
3. jQuery File Upload 图片预览代码如何写
jQuery File Upload是上传文件的一个插件，不一定是图片，所以里面没做预览的支持。但是可以直接用jquery简单实现出来，代码如下：
/*
先在js里扩展一个uploadPreview方法
使用方法:
<div>
<imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
把需要进行预览的IMG标签外套一个DIV然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120,ImgType:["gif","jpeg","jpg","bmp","png"],Callback:function(){}});
*/
jQuery.fn.extend({
uploadPreview:function(opts){
var_self=this,
_this=$(this);
opts=jQuery.extend({
Img:"ImgPr",
Width:100,
Height:100,
ImgType:["gif","jpeg","jpg","bmp","png"],
Callback:function(){}
},opts||{});
_self.getObjectURL=function(file){
varurl=null;
if(window.createObjectURL!=undefined){
url=window.createObjectURL(file)
}elseif(window.URL!=undefined){
url=window.URL.createObjectURL(file)
}elseif(window.webkitURL!=undefined){
url=window.webkitURL.createObjectURL(file)
}
returnurl
};
_this.change(function(){
if(this.value){
if(!RegExp(".("+opts.ImgType.join("|")+")$","i").test(this.value.toLowerCase())){
alert("选择文件错误,图片类型必须是"+opts.ImgType.join("，")+"中的一种");
this.value="";
returnfalse
}
if($.browser.msie){
try{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}catch(e){
varsrc="";
varobj=$("#"+opts.Img);
vardiv=obj.parent("div")[0];
_self.select();
if(top!=self){
window.parent.document.body.focus()
}else{
_self.blur()
}
src=document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width':opts.Width+'px',
'height':opts.Height+'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=src
}
}else{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然后是HTML页面进行调用：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<title>图片上传预览演示</title>
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scriptsrc="16/uploadPreview.js"type="text/javascript"></script>
<script>
$(function(){
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120});
});
</script>
</head>
<body>
<divstyle="width:500px;margin:0pxauto;"><h2>图片上传预览演示</h2>
<div><imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
</div>
</body>
</html>
4. 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
});
5. jquery的post方法上传文件问题。
用jQuery 的Ajax文件上传的组件：ajaxfileupload.js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php', //你处理上传文件的服务端
secureuri:false,
fileElementId:'img',
dataType: 'json',
success: function (data)
{
alert(data.file_infor);
}
}
)
return false;
}
</script>
<input id="img" type="file" size="45" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
6. 使用jquery.form.js实现文件上传及进度条前端代码
ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。
需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。
去掉hidden的class，看到的效果是这样的
[图片上传失败...(image-2c700a-1548557865446)]
将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //获取上传文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[图片上传失败...(image-3d6ae0-1548557865446)]
[图片上传失败...(image-9f0adf-1548557865446)]
更多用法可以 参考官网