Demo演示地址(升級至Uploader6.0):
http://www.gongjuji.net/uploader/
GitHub地址:
https://github.com/tianma3798/Uploader/
1.簡單文件上傳
<div class="divTwo" style="width:500px;">
<div class="uploader" id="uploadBtn"></div>
<div>
文件名:<span class="fileName redFont"></span>
</div>
</div>
<script>
/*
* 簡單文件上傳
*/
var uploader = $('#uploadBtn').uploader({
url: '../ashx/upload3.0.ashx',
fileTypeExts: 'doc;docx',
text: '上傳word文檔',
maxSize: 1024 * 100,
onSuccess: function (data) {
$('.fileName').text(data);
}
});
</script>
2.簡單圖片上傳
<div class="uploader" id="uploadBtn"></div>
<br />
<input id="btnOne" type="button" value="確定上傳"/>
<br /><br />
<div>
圖片:
<img id="imgOne" width="100" height="100" style="border:1px solid gray;" />
</div>
<script type="text/javascript">
/*
* 簡單上傳圖片
*/
var uploader = $('#uploadBtn').uploader({
url: '../ashx/upload3.0.ashx',
fileTypeExts: 'jpg;png',
text: '選擇圖片',
maxSize: 1024 * 1000,
onSuccess: function (data) {
$('#imgOne').attr('src', '/content/tempfile/' + data);
}
});
/*
* 確定上傳移動文件到上傳目錄
*/
$('#btnOne').click(function () {
$.post('../ashx/MoveOne.ashx', {
filename:uploader.getFileName()
}, function (data) {
alert(data);
})
});
</script>
3.剪切上傳圖片1
<div class="uploader" id="uploadBtnOne"></div>
<div>
圖片:100*100px;
<br />
<img id="imgOne" width="100" height="100" style="border:1px solid gray;" />
</div>
<script type="text/javascript">
/*
* 剪切上傳圖片
*/
var uploader = $('#uploadBtnOne').uploader({
url: '../ashx/upload3.0.ashx',
type: 'dialog',
text: '選擇圖片',
maxSize: 1024 * 1024 * 10,
onSuccess: function (data) {
//$('#imgOne').attr('src', '/content/tempfile/' + data);
//判斷是否支持filereader
if (uploader.isSupportClip()) {
$('#imgOne').attr('src', '/content/tempfile/' + data);
} else {
var dataList = data.split('|');
$('#imgOne').attr('src', '/content/tempfile/' + dataList[1]);
}
}
});
</script>
4.剪切上傳圖片2
<div class="uploader" id="uploadBtnOne"></div>
<div>
圖片:200*100px;
<br />
<img id="imgOne" width="200" height="200" style="border:1px solid gray;" />
</div>
<script type="text/javascript">
/*
* 剪切上傳圖片
*/
var uploader = $('#uploadBtnOne').uploader({
url: '../ashx/upload3.0.ashx',
fileTypeExts: 'jpg;png;gif',
type: 'dialog',
text: '選擇圖片',
maxSize: 1024 * 1000,
onSuccess: function (data) { //如果使用coverParams參數,onSuccess失效
},
coverParams: {
width: 680,
targetWidth: 200,
targetHeight: 200,
onYes: function (obj, data) {
//判斷是否支持filereader
if (uploader.isSupportClip()) {
$('#imgOne').attr('src', '/content/tempfile/' + data);
} else {
var dataList = data.split('|');
$('#imgOne').attr('src', '/content/tempfile/' + dataList[1]);
}
}
}
});
</script>