87,997
社区成员




// 双击上传弹窗区域,向input[type=file]元素转发单击事件,弹出windows的打开文件窗口,选择图片
$(".vicp-drop-area").dblclick(function(e){
if($("#upload_file")){
$("#upload_file").click();
}
});
// 选中图片后打开 发生change事件,
$("#upload_file").on("change",function(e){
$(".step1").hide(); // 隐藏第一步选择图片的弹窗
$(".step2").show(); // 隐藏第二步图片上传预览弹窗
});
<div class="vicp-step1">
<div class="vicp-drop-area">
<img src="" alt class="vicp-icon1">
<span class="vicp-hint">双击此处选择图片</span>
<span class="vicp-no-supported-hint" style="display:none;">浏览器不支持该功能,需要IE10以上!</span>
<input type="file" id="upload_file" style="display:none;">
</div>
<div class="vicp-operate">
<a>取消</a>
</div>
</div>
$('.upfile').click(function () {
var that = this;
var file = $('<input type="file" accept=".zip,.rar,.doc,.xls,.docx,.xlsx,.pdf,.ppt" />');
var el = file[0];
file.on('change', function (e) {
$('<div id="mask" style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#ccc;opacity:.4;filter:alpha(opacity=40);display:none;"></div>').appendTo($('body'));
$('#mask').show();
var files = $(this).get(0).files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
if (files[i].size > 20 * 1024 * 1024) {
alert('您选择的文件中有超出20M限制的文件,请重新选择并上传。');
return;
}
formData.append('fn' + i, files[i].name);
formData.append('file' + i, files[i]);
}
$.ajax({
url: 'https://xxxx.com.cn/upyun.aspx'
, type: 'POST'
, data: formData
, cache: false
, contentType: false
, processData: false
, success: function (data) {
var filepath = eval('(' + data + ')');
$(that).val(filepath[0]['url'])
$('#mask').remove();
}
, error: function (data) {
console.log(data)
alert('上传失败')
$('#mask').remove();
}
});
});
el.click();
});