最終想實現的功能是，在一個表單內，通過動態增加文本框和上傳圖片功能，不限制數量的設置圖片和圖片標題在最外層用一個form表單統一提交所有的圖片鏈接、圖片標題。
網上找的php ajax上傳圖片，我在使用動態增加文本框和上傳圖片時，將“獲取”按鈕綁定事件。就可以在新生成的UL中，獲取當前UL下title[]的值。想用類似方法在新生成的UL中點擊按鈕實現上傳。發現jQuery中直接是new了一個對象出來。不知道該如何綁定。
現在點擊默認的上傳按鈕，可以實現上傳。但動態生成出來的上傳按鈕就點擊無效。
代碼中引入的plupload.full.min.js的文檔是http://chaping.github.io/plup...
<!DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script type="text/javascript" src="plupload.full.min.js"></script>
<script type="text/javascript">
$(function() {
var uploader = new plupload.Uploader({ //創建實例的構造方法
runtimes: 'html5,html4',
//上傳插件初始化選用那種方式的優先級順序
browse_button: 'btn',
// 上傳按鈕
url: "ajax.php",
filters: {
max_file_size: '500kb',
//最大上傳文件大?。ǜ袷?00b, 10kb, 10mb, 1gb）
mime_types: [ //允許文件上傳類型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: false,
//true:ctrl多文件上傳, false 單文件上傳
init: {
FilesAdded: function(up, files) { //文件上傳前
if ($("#ul_pics").children("li").length > 30) {
alert("您上傳的圖片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //遍歷文件
// li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
// $("#ul_pics").append(li);
uploader.start();
}
},
// UploadProgress: function(up, file) { //上傳中，顯示進度條
// $("#" + file.id).find('.bar').css({
// "width": file.percent + "%"
// }).find(".percent").text(file.percent + "%");
// },
FileUploaded: function(up, file, info) { //文件上傳成功的時候觸發
var data = JSON.parse(info.response);
$(".pics").attr('src',data.pic);
$(".res").val(data.name);
// $("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");
},
Error: function(up, err) { //上傳出錯的時候觸發
alert(err.message);
}
}
});
uploader.init();
$("#add").click(function(){
var a = '\
<ul class="list">\
<li><a id="huoqu">獲取</a></li>\
<li><input class="title" name="title[]"></input></li>\
<li><input class="res" name="res[]"></input></li>\
<li><img class="pics" name="pics[]" src="https://www.baidu.com/img/baidu_jgylogo3.gif"></img></li>\
<li>\
<a class="btn" id="btn" style="color: red;background-color: yellow;cursor: pointer;">上傳圖片</a>\
</li>\
</ul>\
';
$(a).appendTo("#content");
});
$("#content").delegate("#huoqu","click",function(){
console.log($(this).parent().parent().find(".title").val());
});
});
</script>
<body> <ul id="ul_pics" class="ul_pics clearfix"></ul>
<a id="add">增加</a>
<a id="del">刪除</a>
<div id="content">
<ul class="list">
<li><a id="huoqu">獲取</a></li>
<li><input class="title" name="title[]" value="title[]">title[]</input></li>
<li><input class="res" name="res[]" value="res[]">res[]</input></li>
<li><img class="pics" name="pics[]" src="https://www.baidu.com/img/baidu_jgylogo3.gif"></img></li>
<li>
<a class="btn" id="btn">上傳圖片</a>
</li>
</ul>
</div>
</body>
</html>
- 6 回答
- 0 關注
- 553 瀏覽
添加回答
舉報
0/150
提交
取消