Heim >Backend-Entwicklung >PHP-Tutorial >有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。
<code><script src="dropzone.js"></script> <form action="data.php" method="post"> <div class="row-fluid"> <div class="span4" style="text-align: center;"> <div id="my-dropzone"> <img id="imgNoPhoto" src="/img/no-photo.jpg" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" > </div> <a id="openDropZone" href="#" class="btn btn-inverse" style="margin-top: 10px;"> <img src="" class="icon-plus icon-white" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >照片上傳 </a> </div> </div> <button type="submit">上交</button> </form> <script> var myDropzone = new Dropzone("div#my-dropzone", { url: "./data.php", enqueueForUpload: true, clickable: '#openDropZone', thumbnailWidth: 200, thumbnailHeight: 200, previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\" style=\"display: none;\"><span data-dz-name>\n <div class=\"dz-size\" style=\"display: none;\" data-dz-size>\n <img data-dz-thumbnail / alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >\n \n <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>\n <div class=\"dz-error-message\"><span data-dz-errormessage>\n" }); myDropzone.on("selectedfiles", function(files) { myDropzone.removeAllFiles(); }); myDropzone.on("addedfile", function(file) { $('#imgNoPhoto').hide(); // hide the default no-imge img }); $('#btnRegister').click(function(){ $('#apply-form').submit(); return false; }); </script> <script src="jquery.js"></script> </code>
<code><script src="dropzone.js"></script> <form action="data.php" method="post"> <div class="row-fluid"> <div class="span4" style="text-align: center;"> <div id="my-dropzone"> <img id="imgNoPhoto" src="/img/no-photo.jpg" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" > </div> <a id="openDropZone" href="#" class="btn btn-inverse" style="margin-top: 10px;"> <img src="" class="icon-plus icon-white" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >照片上傳 </a> </div> </div> <button type="submit">上交</button> </form> <script> var myDropzone = new Dropzone("div#my-dropzone", { url: "./data.php", enqueueForUpload: true, clickable: '#openDropZone', thumbnailWidth: 200, thumbnailHeight: 200, previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\" style=\"display: none;\"><span data-dz-name>\n <div class=\"dz-size\" style=\"display: none;\" data-dz-size>\n <img data-dz-thumbnail / alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >\n \n <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>\n <div class=\"dz-error-message\"><span data-dz-errormessage>\n" }); myDropzone.on("selectedfiles", function(files) { myDropzone.removeAllFiles(); }); myDropzone.on("addedfile", function(file) { $('#imgNoPhoto').hide(); // hide the default no-imge img }); $('#btnRegister').click(function(){ $('#apply-form').submit(); return false; }); </script> <script src="jquery.js"></script> </code>
贴部分代码你看下,后台是nodejs,希望对你有帮助
view:
<code> <form id="fmUpload" method="post" enctype="multipart/form-data" class="dropzone"></form> </code>
api:
<code>exports.upload = function(req, res) { //express file info var resource = req.files.resource; } </code>
js:
<code><br> $("#fmUpload").dropzone({ paramName: 'resource',(看此处) url: '/images/upload', dictDefaultMessage: '将文件拖拽至此区域进行上传(或点击此区域)', acceptedFiles: 'image/*', parallelUploads: 1, maxFilesize: 1, maxFiles: 1, init: function() {}, success: function(file, data) { if (data.status === 1) { $scope.uploadImage = data.message; $scope.listUserImages(); } else { alertService.showAlert({ content: data.message, type: 'warning' }); $('.dz-error-mark').show(); } } }); </code>
想问下楼主,你的data.php,除了做文件的上传操作,其它的比如操作数据库的操作可以进行么?
我这里也在使用这个插件,但遇到个问题,当把选择的文件上传到指定的路径后,前台如何进行显示,想在进行文件上传操作后,进行数据库插入操作,但不能执行,不知楼主有没有遇到过这样的问题呢?