ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery Pluploadアップロードプラグインの使い方を詳しく解説
jQuery Pluploadアップロードプラグインの使い方を詳しく解説
- 小云云オリジナル
- 2018-01-17 14:48:483654ブラウズ
この記事では主に jQuery Plupload アップロード プラグインの詳細な使用方法を紹介します。必要な方はぜひ参考にしてください。
まず plupload をダウンロードします ->http://www.plupload.com
Plupload には設定可能なパラメーターが多数あるため、ここでは jquery-ui で表示される最も一般的に使用されるインターフェイスについて説明します。以下の通り:
Plupload はデフォルトで html5、flash、silverlight、html4 をサポートしており、ブラウザが html5 をサポートしていない場合は順番にロードされ、最後に html4 が選択されます。
特定のアップロード方法が必要ない場合は、設定に書かないでください。 コードに直接アクセスしてください<body>
<p id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</p>
<script type="text/javascript">
$(function(){
$("#uploader").plupload({
runtimes: 'html5,flash,silverlight,html4',//这里可以不写,plupload默认支持
url: "UploadPhotoServlet",//上传后台请求路径
max_file_size: '1000mb',//用来限制单个文件大小的
multi_selection: true,//默认支持多文件上传,false不支持
chunk_size: '0',//是否将上传文件进行分片,0代表是不分
/*resize配置是对图片的处理
可以使用该参数对将要上传的图片进行压缩，该参数是一个对象，里面包括5个属性：width：指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度
height：指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度
crop：是否裁剪图片
quality：压缩后图片的质量，只对jpg格式的图片有效，默认为90。quality可以跟width和height一起使用，但也可以单独使用，单独使用时，压缩后图片的宽高不会变化，但由于质量降低了，所以体积也会变小
preserve_headers：压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点
resize参数的配置示例如下：
*/
/* resize : {
width: 200,
height: 200,
quality: 90,
crop: true
}, */
/* rename: true, *///允许多队列文件进行重命名
/* sortable: true,*/ //启用队列中的文件排序功能，更改上传优先级
/*dragdrop: true, */ //开启拖拽上传,默认true
/*
下面是展示右边的缩略图和列表 两个功能
默认显示缩略图
*/
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
},
/*
flash 和 xap 上传需要的文件
*/
flash_swf_url : 'plupload/js/Moxie.swf',
silverlight_xap_url : 'plupload/js/Moxie.xap'
});
})
</script>
</body>公式ドキュメントにこんな一文があります
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="plupload/js/jquery.js"></script> <script type="text/javascript" src="plupload/js/jqueryui/jquery-ui.min.js"></script> <link rel="stylesheet" href="plupload/js/jqueryui/jquery-ui.min.css" rel="external nofollow" /> <script type="text/javascript" src="plupload/js/plupload.full.min.js"></script> <script type="text/javascript" src="plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js"></script> <script type="text/javascript" src="plupload/js/i18n/zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" rel="external nofollow" /> <title>plupload</title> </head>
2 つの追加パラメータを設定します
filters: {
mime_types : [ //只允许上传图片和zip文件
{ title : "Image files", extensions : "jpg,gif,png" },
{ title : "Zip files", extensions : "zip" }
],
max_file_size : '400kb', //最大只能上传400kb的文件
prevent_duplicates : true //不允许选取重复文件
}
3. easyui、extjs、および他の UI ライブラリと統合する場合、Plupload によって導入されたファイルは easyui にインポートされたファイルよりも前にある必要があります。そうしないと、easyui でいくつかの不可解なエラーが発生します。
jquery ajaxfileupload 非同期アップロード プラグインの詳細な説明
ThinkPHP5 .0の画像アップロードプラグイン実装例 Share
jQueryアップロードプラグインwebuploadの使い方を詳しく解説
以上がjQuery Pluploadアップロードプラグインの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。