图片上传预览+JS+HTML+PHP

我在服务器上做个图片上传并预览的功能,用了一个JS,可是不太能兼容IE8,求大神,能给个
例子不但能预览图片还能知道图片的大小,因为上传图片有大小限制,谢谢了

2个回答

完成了在IE 下用的这个
else if (document.all) {
file.select();
var reallocalpath = document.selection.createRange().text
if (window.ie6) pic.src = reallocalpath;
else {
// pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
pic.src = reallocalpath;
}
}
可是,在IE8 下现在这个设置会让图片平铺在页面,所以用的pic.src = reallocalpath;来显示的图片

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
图片上传预览+JS+HTML+PHP

我在服务器上做个图片上传并预览的功能,用了一个JS,可是不太能兼容IE8,求大神,能给个 例子不但能预览图片还能知道图片的大小,因为上传图片有大小限制,谢谢了

java web项目整合一个图片上传webUploader

因为是初学者,所以想写个ssh的小项目,练练手, 在网上下了一个商城的后台模板,最近正在实现功能, 现在写到了,新增商品时的上传功能, 模板自带的上传是用的webUploader, 现在遇到的问题是图片上传的时候不知道怎么保存在服务器中, 代码如下: html: <div class="clearfix cl"> <label class="form-label col-2">图片上传:</label> <div class="formControls col-10"> <div class="uploader-list-container"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker-2"></div> <p>或将照片拖到这里,单次最多可选300张</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn">开始上传</div> </div> </div> </div> </div> </div> js: $(function(){ $('.skin-minimal input').iCheck({ checkboxClass: 'icheckbox-blue', radioClass: 'iradio-blue', increaseArea: '20%' }); $list = $("#fileList"), $btn = $("#btn-star"), state = "pending", uploader; var uploader = WebUploader.create({ auto: true, swf: 'lib/webuploader/0.1.5/Uploader.swf', // 文件接收服务端。 server: 'fileUpload.action', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); }); 问题是, // 文件接收服务端。 server: 'fileUpload.action', 在网上查的这个属性是文件接收服务器端,如果我给一个Action,它会显示上传成功![图片说明](https://img-ask.csdn.net/upload/201706/25/1498386878_982619.png) 就算是上传成功,在服务器也找不到这个图片, 但是,原页面和网上搜到的一些例子都是 // 文件接收服务端。 server: 'http://webuploader.duapp.com/server/fileupload.php', 以php结尾的文件,这个是有什么问题,求解释 如果我修改成这个文件,就上传失败了, 这个属性值到底是给什么,还有,我怎么能获取到他的路径,文件名称,是在Action中定义file属性,get,set,获取他的值吗?

从预览PHP JS中删除一些文件后如何上传多个文件

<div class="post-text" itemprop="text"> <p>an example I've uploaded the 3 Image (files), In the preview, I did not like 1 file that has been deleted, rest of the files 2 and it should upload 2 but when I press submit button 3 files inserting into the database </p> <p>please help me not working</p> <p><strong>html code</strong></p> <pre><code> &lt;form action="" method="post" enctype="multipart/form-data"&gt; &lt;div id="filediv"&gt; &lt;input name="upload[]" type="file" id="upload" multiple="multiple" /&gt; &lt;/div&gt; &lt;input type="submit" value="Upload Image" name="submit"/&gt; &lt;/form&gt; </code></pre> <p><strong>Jquery code</strong></p> <pre><code> function deletePreview(ele, i) { "use strict"; try { $(ele).parent().remove(); filesToUpload.splice(i, 1); } catch (e) { console.log(e.message); } } $("#upload").on('change', function() { "use strict"; var filesToUpload = []; if (this.files.length &gt;= 1) { $("[id^=previewImg]").remove(); $.each(this.files, function(i, img) { var reader = new FileReader(), newElement = $("&lt;div id='previewImg" + i + "' class='abcd'&gt;&lt;img /&gt;&lt;/div&gt;"), deleteBtn = $("&lt;span class='delete' onClick='deletePreview(this, " + i + ")'&gt;delete&lt;/span&gt;").appendTo(newElement), preview = newElement.find("img"); reader.onloadend = function() { preview.attr("src", reader.result); preview.attr("alt", img.name); }; var f = document.getElementById("upload").files[i]; filesToUpload.push(f); if (img) { reader.readAsDataURL(img); } else { preview.src = ""; } newElement.appendTo("#filediv"); }); } }); </code></pre> <p><strong>php code</strong></p> <pre><code> $total = count($_FILES['upload']['name']); for( $i=0 ; $i &lt; $total ; $i++ ) { $tmpFilePath = $_FILES['upload']['tmp_name'][$i]; if ($tmpFilePath != ""){ $newFilePath = "./upload_files/" . $_FILES['upload']['name'][$i]; if(move_uploaded_file($tmpFilePath, $newFilePath)) { } } } </code></pre> <p>Thanks in advance</p> </div>

kindeditor成功上传图片后,在富文本框内无法正常显示

我直接下载的demo,用servlet改写了jsp,没有问题,但是现在用springboot,就出现了这种问题。 不废话,直接上代码,恳请各位大神的指导: html: ``` <link rel="stylesheet" href="/kindeditor-master/themes/default/default.css" /> <link rel="stylesheet" href="/kindeditor-master/plugins/code/prettify.css" /> <script charset="utf-8" src="/kindeditor-master/kindeditor-all.js"></script> <script charset="utf-8" src="/kindeditor-master/lang/zh-CN.js"></script> <script charset="utf-8" src="/kindeditor-master/plugins/code/prettify.js"></script> <script> KindEditor.ready(function(K) { K.create('textarea[name="content1"]', { cssPath : '/kindeditor-master/plugins/code/prettify.css', uploadJson : '/kindEditor/upLoad', fileManagerJson : '/kindEditor/Manager', allowFileManager : true,//是否允许浏览服务器上传文件 //resizeType : 0,是否可改变编辑器大小0不可以,1可改高度,2都可以。默认为2 afterCreate : function(msg) { var self = this; K.ctrl(document, 13, function() { self.sync(); document.forms['example'].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); document.forms['example'].submit(); }); } }); prettyPrint(); }); </script> ``` 这是文件上传类: ``` @Controller @RequestMapping("/kindEditor") public class UpLoadJsonAction { @RequestMapping("/upLoad") public void upLoadImage(HttpServletRequest request, HttpServletResponse response){ try { PrintWriter out = response.getWriter(); //文件保存目录路径 String savePath = request.getRealPath("/") + "attached/"; //文件保存目录URL String saveUrl = request.getContextPath() + "/attached/"; //定义允许上传的文件扩展名 HashMap<String, String> extMap = new HashMap<String, String>(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); extMap.put("flash", "swf,flv"); extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小 long maxSize = 1000000; response.setContentType("text/html; charset=UTF-8"); if(!ServletFileUpload.isMultipartContent(request)){ out.println(getError("请选择文件。")); return; } //检查目录 File uploadDir = new File(savePath); if(!uploadDir.isDirectory()){ out.println(getError("上传目录不存在。")); return; } //检查目录写权限 if(!uploadDir.canWrite()){ out.println(getError("上传目录没有写权限。")); return; } String dirName = request.getParameter("dir"); if (dirName == null) { dirName = "image"; } if(!extMap.containsKey(dirName)){ out.println(getError("目录名不正确。")); return; } //创建文件夹 savePath += dirName + "/"; saveUrl += dirName + "/"; File saveDirFile = new File(savePath); if (!saveDirFile.exists()) { saveDirFile.mkdirs(); } SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String ymd = sdf.format(new Date()); savePath += ymd + "/"; saveUrl += ymd + "/"; File dirFile = new File(savePath); if (!dirFile.exists()) { dirFile.mkdirs(); } //创建一个DiskFileItemFactory工厂 FileItemFactory factory = new DiskFileItemFactory(); //创建一个文件上传解析器 ServletFileUpload upload = new ServletFileUpload(factory); //设置编码 upload.setHeaderEncoding("UTF-8"); // //判断提交上来的数据是否是上传表单的数据 // if(!ServletFileUpload.isMultipartContent(request)){ // //按照传统方式获取数据 // return; // } //判断提交上来的是list数据 // List items = upload.parseRequest(request); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Iterator item = multipartRequest.getFileNames(); // Iterator itr = items.iterator(); while (item.hasNext()) { String fileName = (String) item.next(); MultipartFile file = multipartRequest.getFile(fileName); // 检查文件大小 if (file.getSize() > maxSize) { out.println(getError("上传文件大小超过限制。")); return; } // 检查扩展名 String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase(); if (!Arrays. asList(extMap.get(dirName).split(",")).contains(fileExt)) { out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。")); return; } SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; try { File uploadedFile = new File(savePath, newFileName); ByteStreams.copy(file.getInputStream(), new FileOutputStream(uploadedFile)); } catch (Exception e) { } JSONObject obj = new JSONObject(); obj.put("error", 0); obj.put("url", saveUrl + newFileName); out.println(obj.toJSONString()); } } catch (Exception e) { e.printStackTrace(); } } //上传报错的提示方法 private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString(); } } ``` 这是文件管理类: ``` @Controller @RequestMapping("/kindEditor") public class FileManagerJsonAction { @RequestMapping("/Manager") public void fileManager(HttpServletRequest request, HttpServletResponse response){ PrintWriter out = null; try { out = response.getWriter(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } //根目录路径 String rootPath = request.getRealPath("/") + "attached/"; //根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/ String rootUrl = request.getContextPath() + "/attached/"; //图片扩展名 String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"}; //要打开的文件夹 String dirName = request.getParameter("dir"); if (dirName != null) { if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){ out.println("无效的目录"); return; } rootPath += dirName + "/"; rootUrl += dirName + "/"; File saveDirFile = new File(rootPath); if (!saveDirFile.exists()) { saveDirFile.mkdirs(); } } //根据path参数,设置各路径和URL String path = request.getParameter("path") != null ? request.getParameter("path") : ""; String currentPath = rootPath + path; String currentUrl = rootUrl + path; String currentDirPath = path; String moveupDirPath = ""; if (!"".equals(path)) { String str = currentDirPath.substring(0, currentDirPath.length() - 1); moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : ""; } //排序形式,name or size or type String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name"; //不允许使用..移动到上一级目录 if (path.indexOf("..") >= 0) { out.println("Access is not allowed."); return; } //最后一个字符不是/ if (!"".equals(path) && !path.endsWith("/")) { out.println("Parameter is not valid."); return; } //目录不存在或不是目录 File currentPathFile = new File(currentPath); if(!currentPathFile.isDirectory()){ out.println("Directory does not exist."); return; } //遍历目录取的文件信息 List<Hashtable> fileList = new ArrayList<Hashtable>(); if(currentPathFile.listFiles() != null) { for (File file : currentPathFile.listFiles()) { Hashtable<String, Object> hash = new Hashtable<String, Object>(); String fileName = file.getName(); if(file.isDirectory()) { hash.put("is_dir", true); hash.put("has_file", (file.listFiles() != null)); hash.put("filesize", 0L); hash.put("is_photo", false); hash.put("filetype", ""); } else if(file.isFile()){ String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); hash.put("is_dir", false); hash.put("has_file", false); hash.put("filesize", file.length()); hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt)); hash.put("filetype", fileExt); } hash.put("filename", fileName); hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified())); fileList.add(hash); } } if ("size".equals(order)) { Collections.sort(fileList, new SizeComparator()); } else if ("type".equals(order)) { Collections.sort(fileList, new TypeComparator()); } else { Collections.sort(fileList, new NameComparator()); } JSONObject result = new JSONObject(); result.put("moveup_dir_path", moveupDirPath); result.put("current_dir_path", currentDirPath); result.put("current_url", currentUrl); result.put("total_count", fileList.size()); result.put("file_list", fileList); response.setContentType("application/json; charset=UTF-8"); out.println(result.toJSONString()); } } ``` 正常的效果应该是上传完图片后在富文本框内也是正常显示图片。现在可以上传,但是富文本框内的图片无法正常显示。在文件管理里面,可以找到相应的文件夹或者图片,但是图片也无法正常显示。 结果如下: ![图片说明](https://img-ask.csdn.net/upload/201702/28/1488263695_341596.png) ![图片说明](https://img-ask.csdn.net/upload/201702/28/1488263482_296738.png)

SpringMvc+layui 实现图片上传更新头像 但是总弹出接口异常(很急!!!!)

![图片说明](https://img-ask.csdn.net/upload/201905/25/1558713715_871569.png) **前端请求时候 url 500** ``` <script src="${pageContext.request.contextPath}/resources/layui.all.js"></script> <script> $ = layui.$; var $ = layui.jquery var form = layui.form; var element=layui.element; var layer=layui.layer; var upload = layui.upload; $("#nav").load("/filmos/nav"); upload.render({ elem: '#choose' , auto: false , url: '${pageContext.request.contextPath}/user/updateuserimg' ,accept: 'file' , bindAction: '#upload' , choose: function (obj) {//选择文件的回调,obj为选中的文件 //将每次选择的文件追加到文件队列 var files = obj.pushFile(); //预览选中的文件(本地文件) obj.preview(function (index, file, result) { $('#user-img').attr('src', result); $('#upload').css('display', 'block'); }); } , before: function (obj) {//文件上传前的回调 } , done: function (res) { if (res.code==200) { location.href = "${pageContext.request.contextPath}/ok" }else { //演示失败状态,并实现重传 return layer.msg(res.msg); } } ,error: function(res) { console.log(res); console.log(res.code); console.log(res.msg); var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); </script> </body> </html> ``` **js代码** ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558713861_529370.png) **但是实际上功能是实现了的 数据库中也更新了 但是每次都会弹出接口异常** ``` //上面还有个requestmapping是user 通过user/updateuserimg到这个方法 @ResponseBody @RequestMapping(value = "/updateuserimg", method = {RequestMethod.POST,RequestMethod.GET}) private JSONObject updateUserImg(@RequestParam(value = "file", required = false) CommonsMultipartFile multipartFile, HttpSession session) throws IOException{ User user = (User) session.getAttribute("user"); JSONObject jsonObject=new JSONObject(); if (multipartFile != null && multipartFile.getSize() > 0&& user!=null) { userService.updateUserImg(user, multipartFile.getInputStream(), multipartFile.getOriginalFilename()); session.setAttribute("user", userService.login(user)); jsonObject.put("code",200); jsonObject.put("msg","更新成功!"); jsonObject.put("src",user.getUserImg()); return jsonObject; } else { jsonObject.put("code",400); jsonObject.put("msg","更新失败!"); return jsonObject; } } } ``` Contoller的代码 ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558713969_417859.png) ssm配置的 ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558714077_867660.png) ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558714083_361418.png)![图片说明](https://img-ask.csdn.net/upload/201905/25/1558714089_172810.png)

多个文件上传与图像预览

<div class="post-text" itemprop="text"> <p>I've a multiple file upload form and I need to display the real time preview of uploaded images. I've implemented this by using jQuery. But from that preview images, I want to select the default image ( a radio button along with images to select ).</p> <pre><code>&lt;input type="file" name="pictures[]" multiple="multiple" id="fileupload" /&gt; &lt;div id="dvPreview"&gt;&lt;/div&gt; </code></pre> <p>JQuery code to display the file preview;</p> <pre><code>$("#fileupload").change(function () { if (typeof (FileReader) != "undefined") { var dvPreview = $("#dvPreview"); dvPreview.html(""); var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; $($(this)[0].files).each(function () { var file = $(this); if (regex.test(file[0].name.toLowerCase())) { var reader = new FileReader(); reader.onload = function (e) { var img = $("&lt;img /&gt;"); img.attr("style", "width:150px; height:100px; margin-right: 10px;margin-top: 10px;"); img.attr("src", e.target.result); dvPreview.append(img); } reader.readAsDataURL(file[0]); } else { alert(file[0].name + " is not a valid image file."); dvPreview.html(""); return false; } }); } else { alert("This browser does not support HTML5 FileReader."); } }); </code></pre> <p>But I need to place a radio button along with this to select the default image.</p> <p>Now I can see the post values like this;</p> <pre><code>array =&gt; 0 =&gt; array name =&gt; 'image-1.jpg' type =&gt; 'image/jpeg' tmp_name =&gt; '/opt/lampp/temp/phpoktbaw' error =&gt; 0 size =&gt; 706557 1 =&gt; array name =&gt; 'image-2.jpg' type =&gt; 'image/jpeg' tmp_name =&gt; '/opt/lampp/temp/phpl4rbsi' error =&gt; 0 size =&gt; 1785309 2 =&gt; array name =&gt; 'image-3.jpg' type =&gt; 'image/jpeg' tmp_name =&gt; '/opt/lampp/temp/phpn72EL4' error =&gt; 0 size =&gt; 104845 </code></pre> <p>If possible I need to add one more variable to this array with the selected default image value.</p> </div>

【手机上传】jQuery传递数据同时上传文件到php后台接受不到的问题

各位前辈们好,这个问题困扰我挺长时间了,[这是我之前的提问](http://ask.csdn.net/questions/231374 ""),我在网上下载的一份不完整源码:前端有一个上传框,上传图片后会自动生成预览图,可是后台php页面用post方法或者file方法都收不到上传的文件,text文本数据可以收到。有大神告诉我说用form.js插件,小弟不才怎么弄也不会,所以求大神告知详细一点的操作,在哪里添加什么才好?代码如下:![前端](https://img-ask.csdn.net/upload/201601/14/1452743288_168372.jpg) ![js源码](https://img-ask.csdn.net/upload/201601/14/1452743321_52970.jpg) html代码 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="mobile.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#add-topic-form").submit(postTopic); $("#picture").val(""); }); </script> </head> <body> <form method="post" id="add-topic-form" enctype="multipart/form-data"> <div class="inner"> <div class="input-body"> <textarea maxlength="200" name="message" rows="7"></textarea> <div class="input-file"> <div class="file-show"></div> <input type="button" class="camera" > <input type="file" name="picture" id="picture" accept="image/gif, image/jpeg, image/png" onchange="uploadPreview(this.files)"> </div> </div> <input class="submit-button" type="submit" value="发布"> </div> </form> </body> </html> ``` js代码 ``` function uploadPreview(files) { if( !window.FileReader ){} //此处为一些条件 $(".file-show").html("预览加载中..."); var reader = new FileReader(); reader.onload = function(e) { $(".file-show").html(""); $("<img src='data:application/octet-stream;"+e.target.result.substr(e.target.result.indexOf("base64,"))+"' id='previewImg' />").appendTo($(".file-show")).click(function() { $(this).remove(); $("#picture").val(""); }); } reader.readAsDataURL(files[0]); } function postTopic() { var msg = $.trim($('textarea[name=message]').val()); var picture = ""; picture = $("#previewImg").attr("src"); $(".loading").show(); $("#add-topic-form").hide(); $.post("addTopic.php",{"do":"addTopic","msg":msg,"picture":$("#picture").val()},function(data){} //在addTopic.php页面接收不到东西 { if (data.result == "login") { location.href = "./passport.php"; } else if (data.result == "success") { location.href = "./?cid=" + $('input[name=cid]').val(); } else if (data.result == "error") { alert(data.message); $(".loading").hide(); $("#add-topic-form").show(); $('html, body').animate({scrollTop: $(document).height()}, 300); } },"json"); return false; } ```

Html Webuploader 拖拽上传没有效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <link rel="stylesheet" type="text/css" href="D:/web/webuploader/webuploader.css" /> <link rel="stylesheet" type="text/css" href="D:/web/webuploader/uploadstyle.css" /> <script type="text/javascript" src="D:/web/webuploader/upjquery.js"></script> <script type="text/javascript" src="D:/web/webuploader/webuploader.js"></script> <script type="text/javascript" src="D:/web/webuploader/upload.js"></script> </head> <body> <script> uploader = WebUploader.create({ auto: true, // swf文件路径 swf:'D:\web\webuploader\Uploader.swf', // 文件接收服务端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.append( $li ); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); </script> <div id="container" > <div id="uploader" > <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker"></div> <p>或将照片拖到这里,单次最多可选9张,单个文件大小不超过2M</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div><div class="info"></div> <div class="btns"> <div id="filePicker2"></div><div class="uploadBtn">发表</div> </div> </div> </div> </div> </body> </html>

如何在多文件上传公式中动态添加“input type = file”按钮[PHP,MySQL&JS]

<div class="post-text" itemprop="text"> <p>I have a problem by adding "<b>"input type=file"</b>" dynamically.<br></p> <p>I have a formula where the user can select multiple files and can type a title under each selected file, before the user click on the <b>Upload</b> button. When the forumla gets loaded, i want that there is only 1 select button and 1 title field. If the user selected 1 file, then there should show up a new "select file" button and a new title field. (Add buttons dynamically)<br> <br> I think my problem has something to do with <b>file.setAttribute("name", "sel_file");</b> in the JS part and with this for loop<br> <b>for($mf = 0; $mf &lt; count($_FILES['sel_file']['tmp_name']); $mf++)</b> <br>in the php part. It seems php cannot work with "sel_file"</p> <p><br> Anyway, here is my code (<b>The whole code is in 1 php file</b>):<br> (and ignore the security issues, I will do this later)</p> <p><br> <b>PHP Part</b></p> <pre><code>&lt;?php $db = mysqli_connect("localhost", "root", "", "xy"); // If upload button is clicked ... if (isset($_POST['upload'])) { // Get post title $post_title = mysqli_real_escape_string($db, $_POST['post_title']); $sql_p = "INSERT INTO posts (post_title) VALUES ('$post_title')"; if (mysqli_query($db, $sql_p)) { $post_id = mysqli_insert_id($db); for($mf = 0; $mf &lt; count($_FILES['sel_file']['tmp_name']); $mf++) { $file = $_FILES['sel_file']['name'][$mf]; $tmp_file = $_FILES['sel_file']['tmp_name'][$mf]; $target = "files/". basename($file); $file_title = (isset($_POST['file_title'][$mf])?$_POST['file_title'][$mf]:""); if (move_uploaded_file($tmp_file, $target)) { echo "File: ".$file." &amp;#10004;&lt;br&gt;"; } else { echo "File: ".$file." - Upload failed&lt;br&gt;"; } $sql_f = "INSERT INTO files (file, file_title, post_id) VALUES ('$file', '$file_title', $post_id)"; mysqli_query($db, $sql_f); } } } ?&gt; </code></pre> <p><b>HTML &amp; JS Part</b></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Project | XY&lt;/title&gt; &lt;meta charset="UTF-8"/&gt; &lt;script&gt; window.addEventListener("load", function() { document.getElementById("add").addEventListener("click", function() { // Create a div var div = document.createElement("div"); // Create a file input var file = document.createElement("input"); file.setAttribute("type", "file"); file.setAttribute("name", "sel_file"); // Create a text input var text = document.createElement("input"); text.setAttribute("type", "text"); text.setAttribute("name", "file_title"); // add the file and text to the div div.appendChild(file); div.appendChild(text); //Append the div to the container div document.getElementById("container").appendChild(div); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="frame_form"&gt; &lt;form method="POST" action="TEST.php" enctype="multipart/form-data"&gt; &lt;div id="post_title"&gt; &lt;input type="text" name="post_title" placeholder="* Post Title *"&gt; &lt;/div&gt; &lt;br&gt; &lt;form&gt; &lt;div&gt; &lt;input type="button" value="add" id="add" /&gt; &lt;div id="container"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;br&gt; &lt;div id="upload_button"&gt; &lt;button type="submit" name="upload"&gt;+upload&lt;/button&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><br> Before i had no JS code, instead i had the following code, and it worked very well, but was not dynamically ...:<br></p> <pre><code> &lt;?php $sfq = 2 ?&gt; &lt;?php for ($sf=0; $sf&lt;$sfq; $sf++){ ?&gt; &lt;b&gt;&lt;?php echo $sf+1 ?&gt;&lt;/b&gt;&lt;br&gt; File: &lt;input type="file" name="sel_file[&lt;?php echo $sf ?&gt;]"&gt;&lt;br&gt; Title: &lt;input name="file_title[&lt;?php echo $sf ?&gt;]"&gt;&lt;br&gt; &lt;?php } ?&gt; </code></pre> </div>

asp.net webuploader多图片上传并保存文件路径到数据库

![图片说明](https://img-ask.csdn.net/upload/201906/22/1561187942_114655.jpg) 要做一个滚动窗功能,使用webuploader插件 不知道在哪获取文件路径,保存到数据库里 上传的upload.js ``` (function( $ ){ // 当domReady的时候开始初始化 $(function() { var $wrap = $('.uploader-list-container'), // 图片容器 $queue = $( '<ul class="filelist"></ul>' ) .appendTo( $wrap.find( '.queueList' ) ), // 状态栏,包括进度和控制按钮 $statusBar = $wrap.find( '.statusBar' ), // 文件总体选择信息。 $info = $statusBar.find( '.info' ), // 上传按钮 $upload = $wrap.find( '.uploadBtn' ), // 没选择文件之前的内容。 $placeHolder = $wrap.find( '.placeholder' ), $progress = $statusBar.find( '.progress' ).hide(), // 添加的文件数量 fileCount = 0, // 添加的文件总大小 fileSize = 0, // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息,key为file id percentages = {}, // 判断浏览器是否支持图片的base64 isSupportBase64 = ( function() { var data = new Image(); var support = true; data.onload = data.onerror = function() { if( this.width != 1 || this.height != 1 ) { support = false; } } data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; } )(), // 检测是否已经安装flash,检测flash的版本 flashVersion = ( function() { var version; try { version = navigator.plugins[ 'Shockwave Flash' ]; version = version.description; } catch ( ex ) { try { version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash') .GetVariable('$version'); } catch ( ex2 ) { version = '0.0'; } } version = version.match( /\d+/g ); return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 ); } )(), supportTransition = (function(){ var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), // WebUploader实例 uploader; if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) { // flash 安装了但是版本过低。 if (flashVersion) { (function(container) { window['expressinstallcallback'] = function( state ) { switch(state) { case 'Download.Cancelled': alert('您取消了更新!') break; case 'Download.Failed': alert('安装失败') break; default: alert('安装已成功,请刷新!'); break; } delete window['expressinstallcallback']; }; var swf = 'expressInstall.swf'; // insert flash object var html = '<object type="application/' + 'x-shockwave-flash" data="' + swf + '" '; if (WebUploader.browser.ie) { html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; } html += 'width="100%" height="100%" style="outline:0">' + '<param name="movie" value="' + swf + '" />' + '<param name="wmode" value="transparent" />' + '<param name="allowscriptaccess" value="always" />' + '</object>'; container.html(html); })($wrap); // 压根就没有安转。 } else { $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>'); } return; } else if (!WebUploader.Uploader.support()) { alert( 'Web Uploader 不支持您的浏览器!'); return; } // 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker-2', label: '点击选择图片' }, formData: { uid: 123 }, dnd: '#dndArea', paste: '#uploader', swf: '../Uploader.swf', chunked: false, chunkSize: 512 * 1024, server: './Ajax/UpLoad.ashx', // runtimeOrder: 'flash', accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 disableGlobalDnd: true, fileNumLimit: 300, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M }); // 拖拽时不接受 js, txt 文件。 uploader.on( 'dndAccept', function( items ) { var denied = false, len = items.length, i = 0, // 修改js类型 unAllowed = 'text/plain;application/javascript '; for ( ; i < len; i++ ) { // 如果在列表里面 if ( ~unAllowed.indexOf( items[ i ].type ) ) { denied = true; break; } } return !denied; }); uploader.on('dialogOpen', function() { console.log('here'); }); // uploader.on('filesQueued', function() { // uploader.sort(function( a, b ) { // if ( a.name < b.name ) // return -1; // if ( a.name > b.name ) // return 1; // return 0; // }); // }); // 添加“添加文件”的按钮, uploader.addButton({ id: '#filePicker2', label: '继续添加' }); uploader.on('ready', function() { window.uploader = uploader; }); // 当有文件添加进来时执行,负责view的创建 function addFile(file) { alert(file.name); var $li = $( '<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>'+ '<p class="progress"><span></span></p>' + '</li>' ), $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>' + '<span class="rotateRight">向右旋转</span>' + '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ), $prgress = $li.find('p.progress span'), $wrap = $li.find( 'p.imgWrap' ), $info = $('<p class="error"></p>'), showError = function( code ) { switch( code ) { case 'exceed_size': text = '文件大小超出'; break; case 'interrupt': text = '上传暂停'; break; default: text = '上传失败,请重试'; break; } $info.text( text ).appendTo( $li ); }; if ( file.getStatus() === 'invalid' ) { showError( file.statusText ); } else { // @todo lazyload $wrap.text( '预览中' ); uploader.makeThumb( file, function( error, src ) { var img; if ( error ) { $wrap.text( '不能预览' ); return; } if( isSupportBase64 ) { img = $('<img src="'+src+'">'); $wrap.empty().append( img ); } else { $.ajax('../server/preview.php', { method: 'POST', data: src, dataType:'json' }).done(function( response ) { if (response.result) { img = $('<img src="'+response.result+'">'); $wrap.empty().append( img ); } else { $wrap.text("预览出错"); } }); } }, thumbnailWidth, thumbnailHeight ); percentages[ file.id ] = [ file.size, 0 ]; file.rotation = 0; } file.on('statuschange', function( cur, prev ) { if ( prev === 'progress' ) { $prgress.hide().width(0); } else if ( prev === 'queued' ) { $li.off( 'mouseenter mouseleave' ); $btns.remove(); } // 成功 if ( cur === 'error' || cur === 'invalid' ) { console.log( file.statusText ); showError( file.statusText ); percentages[ file.id ][ 1 ] = 1; } else if ( cur === 'interrupt' ) { showError( 'interrupt' ); } else if ( cur === 'queued' ) { percentages[ file.id ][ 1 ] = 0; } else if ( cur === 'progress' ) { $info.remove(); $prgress.css('display', 'block'); } else if ( cur === 'complete' ) { $li.append( '<span class="success"></span>' ); } $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur ); }); $li.on( 'mouseenter', function() { $btns.stop().animate({height: 30}); }); $li.on( 'mouseleave', function() { $btns.stop().animate({height: 0}); }); $btns.on( 'click', 'span', function() { var index = $(this).index(), deg; switch ( index ) { case 0: uploader.removeFile( file ); return; case 1: file.rotation += 90; break; case 2: file.rotation -= 90; break; } if ( supportTransition ) { deg = 'rotate(' + file.rotation + 'deg)'; $wrap.css({ '-webkit-transform': deg, '-mos-transform': deg, '-o-transform': deg, 'transform': deg }); } else { $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')'); // use jquery animate to rotation // $({ // rotation: rotation // }).animate({ // rotation: file.rotation // }, { // easing: 'linear', // step: function( now ) { // now = now * Math.PI / 180; // var cos = Math.cos( now ), // sin = Math.sin( now ); // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')"); // } // }); } }); $li.appendTo( $queue ); } // 负责view的销毁 function removeFile( file ) { var $li = $('#'+file.id); delete percentages[ file.id ]; updateTotalProgress(); $li.off().find('.file-panel').off().end().remove(); } function updateTotalProgress() { var loaded = 0, total = 0, spans = $progress.children(), percent; $.each( percentages, function( k, v ) { total += v[ 0 ]; loaded += v[ 0 ] * v[ 1 ]; } ); percent = total ? loaded / total : 0; spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' ); spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' ); updateStatus(); } function updateStatus() { var text = '', stats; if ( state === 'ready' ) { text = '选中' + fileCount + '张图片,共' + WebUploader.formatSize( fileSize ) + '。'; } else if ( state === 'confirm' ) { stats = uploader.getStats(); if ( stats.uploadFailNum ) { text = '已成功上传' + stats.successNum+ '张照片至XX相册,'+ stats.uploadFailNum + '张照片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>' } } else { stats = uploader.getStats(); text = '共' + fileCount + '张(' + WebUploader.formatSize( fileSize ) + '),已上传' + stats.successNum + '张'; if ( stats.uploadFailNum ) { text += ',失败' + stats.uploadFailNum + '张'; } } $info.html( text ); } function setState( val ) { var file, stats; if ( val === state ) { return; } $upload.removeClass( 'state-' + state ); $upload.addClass( 'state-' + val ); state = val; switch ( state ) { case 'pedding': $placeHolder.removeClass( 'element-invisible' ); $queue.hide(); $statusBar.addClass( 'element-invisible' ); uploader.refresh(); break; case 'ready': $placeHolder.addClass( 'element-invisible' ); $( '#filePicker2' ).removeClass( 'element-invisible'); $queue.show(); $statusBar.removeClass('element-invisible'); uploader.refresh(); break; case 'uploading': $( '#filePicker2' ).addClass( 'element-invisible' ); $progress.show(); $upload.text( '暂停上传' ); break; case 'paused': $progress.show(); $upload.text( '继续上传' ); break; case 'confirm': $progress.hide(); $( '#filePicker2' ).removeClass( 'element-invisible' ); $upload.text( '开始上传' ); stats = uploader.getStats(); if ( stats.successNum && !stats.uploadFailNum ) { setState( 'finish' ); return; } break; case 'finish': stats = uploader.getStats(); if ( stats.successNum ) { alert( '上传成功' ); } else { // 没有成功的图片,重设 state = 'done'; location.reload(); } break; } updateStatus(); } uploader.onUploadProgress = function( file, percentage ) { var $li = $('#'+file.id), $percent = $li.find('.progress span'); $percent.css( 'width', percentage * 100 + '%' ); percentages[ file.id ][ 1 ] = percentage; updateTotalProgress(); }; uploader.onFileQueued = function( file ) { fileCount++; fileSize += file.size; if ( fileCount === 1 ) { $placeHolder.addClass( 'element-invisible' ); $statusBar.show(); } addFile( file ); setState( 'ready' ); updateTotalProgress(); }; uploader.onFileDequeued = function( file ) { fileCount--; fileSize -= file.size; if ( !fileCount ) { setState( 'pedding' ); } removeFile( file ); updateTotalProgress(); }; uploader.on( 'all', function( type ) { var stats; switch( type ) { case 'uploadFinished': setState( 'confirm' ); break; case 'startUpload': setState( 'uploading' ); break; case 'stopUpload': setState( 'paused' ); break; } }); uploader.onError = function( code ) { alert( 'Eroor: ' + code ); }; $upload.on('click', function() { if ( $(this).hasClass( 'disabled' ) ) { return false; } if ( state === 'ready' ) { uploader.upload(); } else if ( state === 'paused' ) { uploader.upload(); } else if ( state === 'uploading' ) { uploader.stop(); } }); $info.on( 'click', '.retry', function() { uploader.retry(); } ); $info.on( 'click', '.ignore', function() { alert( 'todo' ); } ); $upload.addClass( 'state-' + state ); updateTotalProgress(); }); })( jQuery ); ``` ashx文件 ``` <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.IO; using System.Text; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //指定字符集 context.Response.ContentEncoding = System.Text.Encoding.UTF8; if (context.Request["REQUEST_METHOD"] == "OPTIONS") { context.Response.End(); } SaveFile(); } /// <summary> /// 文件保存操作 /// </summary> /// <param name="basePath"></param> private void SaveFile(string basePath = "~/Upload/Images/") { var name = string.Empty; basePath = (basePath.IndexOf("~") > -1) ? System.Web.HttpContext.Current.Server.MapPath(basePath) : basePath; // basePath = FileHelper.GetUploadPath(); HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; //如果目录不存在,则创建目录 if (!Directory.Exists(basePath)) { Directory.CreateDirectory(basePath); } var suffix = files[0].ContentType.Split('/'); //获取文件格式 var _suffix = suffix[1].Equals("jpeg", StringComparison.CurrentCultureIgnoreCase) ? ".jpg" : suffix[1]; var _temp = System.Web.HttpContext.Current.Request["name"]; //如果不修改文件名,则创建随机文件名 //if (!string.IsNullOrEmpty(_temp)) //{ // name = _temp; //} //else //{ Random rand = new Random(24 * (int)DateTime.Now.Ticks); name = rand.Next() + "." + _suffix; //} //文件保存 var full = basePath + name; files[0].SaveAs(full); var _result = "{\"jsonrpc\" : \"2.0\", \"result\" : null, \"Imgurl\" : \"" + name + "\"}"; System.Web.HttpContext.Current.Response.Write(_result); } public bool IsReusable { get { return false; } } } ```

如何使用AngularJs上传视频

<div class="post-text" itemprop="text"> <p>I am using angular-moviemasher editor to my project. But I want to upload videos to the Moviemasher from my SQL database. </p> <pre><code>&lt;input type="button" nv-file-select uploader="uploader" value="c://test.mp4" /&gt; </code></pre> <p></p> <p>but I couldn't upload my video to the system. Actually, my target is If user clicks this button,'test.mp4' video should be upload. please give me an idea of how to do this.</p> <p>Thank you</p> </div>

如何在输入类型文件上传时创建视频缩略图并保存到mysql

<div class="post-text" itemprop="text"> <p>i use form input type file to upload multiple videos i want to create thumbnails automatically and save to mysql without any FFMPEG or any other like GETID3 i searched and got javascript code that is able to create thumbnail but how to upload them to mysql </p> <p>1:This is very good code i can capture from any time but how to upload to mysql server</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no"&gt; &lt;style type="text/css"&gt; body {margin: 0;} #video-demo-container { width: 400px; margin: 40px auto; } #main-video { display: none; max-width: 400px; } #thumbnail-container { display: none; } #get-thumbnail { display: none; } #video-canvas { display: none; } #upload-button { width: 150px; display: block; margin: 20px auto; } #file-to-upload { display: none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="video-demo-container"&gt; &lt;button id="upload-button"&gt;Select MP4 Video&lt;/button&gt; &lt;input type="file" id="file-to-upload" accept="video/mp4" /&gt; &lt;video id="main-video" controls&gt; &lt;source type="video/mp4"&gt; &lt;/video&gt; &lt;canvas id="video-canvas"&gt;&lt;/canvas&gt; &lt;div id="thumbnail-container"&gt; Seek to &lt;select id="set-video-seconds"&gt;&lt;/select&gt; seconds &lt;a id="get-thumbnail" href="#"&gt;Download Thumbnail&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; var _CANVAS = document.querySelector("#video-canvas"), _CTX = _CANVAS.getContext("2d"), _VIDEO = document.querySelector("#main-video"); // Upon click this should should trigger click on the #file-to-upload file input element // This is better than showing the not-good-looking file input element document.querySelector("#upload-button").addEventListener('click', function() { document.querySelector("#file-to-upload").click(); }); // When user chooses a MP4 file document.querySelector("#file-to-upload").addEventListener('change', function() { // Validate whether MP4 if(['video/mp4'].indexOf(document.querySelector("#file-to-upload").files[0].type) == -1) { alert('Error : Only MP4 format allowed'); return; } // Hide upload button document.querySelector("#upload-button").style.display = 'none'; // Object Url as the video source document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file-to-upload").files[0])); // Load the video and show it _VIDEO.load(); _VIDEO.style.display = 'inline'; // Load metadata of the video to get video duration and dimensions _VIDEO.addEventListener('loadedmetadata', function() { console.log(_VIDEO.duration); var video_duration = _VIDEO.duration, duration_options_html = ''; // Set options in dropdown at 4 second interval for(var i=0; i&lt;Math.floor(video_duration); i=i+4) { duration_options_html += '&lt;option value="' + i + '"&gt;' + i + '&lt;/option&gt;'; } document.querySelector("#set-video-seconds").innerHTML = duration_options_html; // Show the dropdown container document.querySelector("#thumbnail-container").style.display = 'block'; // Set canvas dimensions same as video dimensions _CANVAS.width = _VIDEO.videoWidth/2; // half the width for video thumbnail image _CANVAS.height = _VIDEO.videoHeight/2; // half the height for video thumbnail image }); }); // On changing the duration dropdown, seek the video to that duration document.querySelector("#set-video-seconds").addEventListener('change', function() { _VIDEO.currentTime = document.querySelector("#set-video-seconds").value; // Seeking might take a few milliseconds, so disable the dropdown and hide download link document.querySelector("#set-video-seconds").disabled = true; document.querySelector("#get-thumbnail").style.display = 'none'; }); // Seeking video to the specified duration is complete document.querySelector("#main-video").addEventListener('timeupdate', function() { // Re-enable the dropdown and show the Download link document.querySelector("#set-video-seconds").disabled = false; document.querySelector("#get-thumbnail").style.display = 'inline'; }); // On clicking the Download button set the video in the canvas and download the base-64 encoded image data document.querySelector("#get-thumbnail").addEventListener('click', function() { _CTX.drawImage(_VIDEO, 0, 0, _CANVAS.width, _CANVAS.height); document.querySelector("#get-thumbnail").setAttribute('href', _CANVAS.toDataURL()); document.querySelector("#get-thumbnail").setAttribute('download', 'thumbnail.png'); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>2: it automatically create thumbnai after video upload ...</p> <pre><code>&lt;input type="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" /&gt; &lt;div&gt;&lt;/div&gt; &lt;style&gt; div { line-height: 200px; } img { max-width: 200px; max-height: 200px; padding: 5px; vertical-align: middle; text-align: center; } @supports (object-fit: cover) { img { width: 200px; height: 200px; object-fit: cover; } } &lt;/style&gt; &lt;script&gt; document.getElementsByTagName('input')[0].addEventListener('change', function(event) { var file = event.target.files[0]; var fileReader = new FileReader(); if (file.type.match('image')) { fileReader.onload = function() { var img = document.createElement('img'); img.src = fileReader.result; document.getElementsByTagName('div')[0].appendChild(img); }; fileReader.readAsDataURL(file); } else { fileReader.onload = function() { var blob = new Blob([fileReader.result], {type: file.type}); var url = URL.createObjectURL(blob); var video = document.createElement('video'); var timeupdate = function() { if (snapImage()) { video.removeEventListener('timeupdate', timeupdate); video.pause(); } }; video.addEventListener('loadeddata', function() { if (snapImage()) { video.removeEventListener('timeupdate', timeupdate); } }); var snapImage = function() { var canvas = document.createElement('canvas'); canvas.width = video.videoWidth/2; // half the width for video thumbnail image canvas.height = video.videoHeight/2; // half the height for video thumbnail image canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); var image = canvas.toDataURL(); var success = image.length &gt; 100000; if (success) { var img = document.createElement('img'); img.src = image; document.getElementsByTagName('div')[0].appendChild(img); URL.revokeObjectURL(url); } return success; }; video.addEventListener('timeupdate', timeupdate); video.preload = 'metadata'; video.src = url; // Load video in Safari / IE11 video.muted = true; video.playsInline = true; video.play(); }; fileReader.readAsArrayBuffer(file); } }); &lt;/script&gt; </code></pre> <p>so please i just want input type file to upload videos my videos information save to mysql and videos to videos directory i want to auto create thumbnail and and save to videos/thumbnails and thumbnails information to mysql i want pure php , javascript only and please reduce extra javascript code from above script or any ideay by you.</p> </div>

热到图像预览到服务器后自动上传图像

<div class="post-text" itemprop="text"> <p>i got problem in order to upload my image, after sucessfull image preview in jquery to my server. It shows file is not defined in the form.append statement or action.</p> <p>Tried to fix it on my own but couldn`t find a solution that works.Could you advice me or help me a little bit code is following.</p> <pre><code>function readURL(input) { if (input.files &amp;&amp; input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imagePreview').css('background-image', 'url('+e.target.result +')'); $('#imagePreview').hide(); $('#imagePreview').fadeIn(650); } reader.readAsDataURL(input.files[0]); } } $("#imageUpload").change(function() { readURL(this); var formData = new FormData(); formData.append('formData', file); $.ajax({ url: 'assets/uploadProfilepic.php', //Server script to process data type: 'POST', data: formData, contentType: false, processData: false, //Ajax events success: function(html){ alert(html); } }); }); </code></pre> <p>The HTML Part</p> <pre><code>&lt;div class="avatar-upload"&gt; &lt;div class="avatar-edit"&gt; &lt;input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" name="file" /&gt; &lt;label for="imageUpload"&gt;&lt;/label&gt; &lt;/div&gt; &lt;div class="avatar-preview"&gt; &lt;div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Uncaught ReferenceError: file is not defined but it should be or i dont really understand</p> <p>Please someone could help me a little bit or give a solution. Thanks and Greets</p> </div>

iframe“ajax-like”文件上传 - 预览

<div class="post-text" itemprop="text"> <p>I am trying to include a picture uploader in a already existing submission form - Ideally I want it to appear ajax-like so obviously the iframe is the way to go- once uploaded I want it to show a preview of the image uploaded and leave the url for the location of the file in a hidden input</p> <p>I found <a href="http://www.uploadify.com/demos/" rel="nofollow">http://www.uploadify.com/demos/</a> which seems like it would be my best bet however I cant figure out how to make it display a preview image or leave the url in a hidden input. preferably I want an "undo" button in case they selected the wrong file but I'm not picky</p> <p>anyone know either how to make this happen or of a better option</p> </div>

MySQL 8.0.19安装教程(windows 64位)

话不多说直接开干 目录 1-先去官网下载点击的MySQL的下载​ 2-配置初始化的my.ini文件的文件 3-初始化MySQL 4-安装MySQL服务 + 启动MySQL 服务 5-连接MySQL + 修改密码 先去官网下载点击的MySQL的下载 下载完成后解压 解压完是这个样子 配置初始化的my.ini文件的文件 ...

Python+OpenCV计算机视觉

Python+OpenCV计算机视觉系统全面的介绍。

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

navicat(内含激活码)

navicat支持mysql的可视化操作,内涵激活码,不用再忍受弹框的痛苦。

HTML期末大作业

这是我自己做的HTML期末大作业,花了很多时间,稍加修改就可以作为自己的作业了,而且也可以作为学习参考

150讲轻松搞定Python网络爬虫

【为什么学爬虫?】 &nbsp; &nbsp; &nbsp; &nbsp;1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到! &nbsp; &nbsp; &nbsp; &nbsp;2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站 【课程设计】 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: 网络请求:模拟浏览器的行为从网上抓取数据。 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。 &nbsp; 从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! 【课程服务】 专属付费社群+每周三讨论会+1v1答疑

三个项目玩转深度学习(附1G源码)

从事大数据与人工智能开发与实践约十年,钱老师亲自见证了大数据行业的发展与人工智能的从冷到热。事实证明,计算机技术的发展,算力突破,海量数据,机器人技术等,开启了第四次工业革命的序章。深度学习图像分类一直是人工智能的经典任务,是智慧零售、安防、无人驾驶等机器视觉应用领域的核心技术之一,掌握图像分类技术是机器视觉学习的重中之重。针对现有线上学习的特点与实际需求,我们开发了人工智能案例实战系列课程。打造:以项目案例实践为驱动的课程学习方式,覆盖了智能零售,智慧交通等常见领域,通过基础学习、项目案例实践、社群答疑,三维立体的方式,打造最好的学习效果。

基于STM32的电子时钟设计

时钟功能 还有闹钟功能,温湿度功能,整点报时功能 你值得拥有

学生成绩管理系统(PHP + MYSQL)

做的是数据库课程设计,使用的php + MySQL,本来是黄金搭配也就没啥说的,推荐使用wamp服务器,里面有详细的使用说明,带有界面的啊!呵呵 不行的话,可以给我留言!

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

程序员的兼职技能课

获取讲师答疑方式: 在付费视频第一节(触摸命令_ALL)片头有二维码及加群流程介绍 限时福利 原价99元,今日仅需39元!购课添加小助手(微信号:itxy41)按提示还可领取价值800元的编程大礼包! 讲师介绍: 苏奕嘉&nbsp;前阿里UC项目工程师 脚本开发平台官方认证满级(六级)开发者。 我将如何教会你通过【定制脚本】赚到你人生的第一桶金? 零基础程序定制脚本开发课程,是完全针对零脚本开发经验的小白而设计,课程内容共分为3大阶段: ①前期将带你掌握Q开发语言和界面交互开发能力; ②中期通过实战来制作有具体需求的定制脚本; ③后期将解锁脚本的更高阶玩法,打通任督二脉; ④应用定制脚本合法赚取额外收入的完整经验分享,带你通过程序定制脚本开发这项副业,赚取到你的第一桶金!

实用主义学Python(小白也容易上手的Python实用案例)

原价169,限时立减100元! 系统掌握Python核心语法16点,轻松应对工作中80%以上的Python使用场景! 69元=72讲+源码+社群答疑+讲师社群分享会&nbsp; 【哪些人适合学习这门课程?】 1)大学生,平时只学习了Python理论,并未接触Python实战问题; 2)对Python实用技能掌握薄弱的人,自动化、爬虫、数据分析能让你快速提高工作效率; 3)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; 4)想修炼更好的编程内功,优秀的工程师肯定不能只会一门语言,Python语言功能强大、使用高效、简单易学。 【超实用技能】 从零开始 自动生成工作周报 职场升级 豆瓣电影数据爬取 实用案例 奥运冠军数据分析 自动化办公:通过Python自动化分析Excel数据并自动操作Word文档,最终获得一份基于Excel表格的数据分析报告。 豆瓣电影爬虫:通过Python自动爬取豆瓣电影信息并将电影图片保存到本地。 奥运会数据分析实战 简介:通过Python分析120年间奥运会的数据,从不同角度入手分析,从而得出一些有趣的结论。 【超人气老师】 二两 中国人工智能协会高级会员 生成对抗神经网络研究者 《深入浅出生成对抗网络:原理剖析与TensorFlow实现》一书作者 阿里云大学云学院导师 前大型游戏公司后端工程师 【超丰富实用案例】 0)图片背景去除案例 1)自动生成工作周报案例 2)豆瓣电影数据爬取案例 3)奥运会数据分析案例 4)自动处理邮件案例 5)github信息爬取/更新提醒案例 6)B站百大UP信息爬取与分析案例 7)构建自己的论文网站案例

Java8零基础入门视频教程

这门课程基于主流的java8平台,由浅入深的详细讲解了java SE的开发技术,可以使java方向的入门学员,快速扎实的掌握java开发技术!

Python数据挖掘简易入门

&nbsp; &nbsp; &nbsp; &nbsp; 本课程为Python数据挖掘方向的入门课程,课程主要以真实数据为基础,详细介绍数据挖掘入门的流程和使用Python实现pandas与numpy在数据挖掘方向的运用,并深入学习如何运用scikit-learn调用常用的数据挖掘算法解决数据挖掘问题,为进一步深入学习数据挖掘打下扎实的基础。

零基础学C#编程—C#从小白到大咖

本课程从初学者角度出发,提供了C#从入门到成为程序开发高手所需要掌握的各方面知识和技术。 【课程特点】 1 由浅入深,编排合理; 2 视频讲解,精彩详尽; 3 丰富实例,轻松易学; 4 每章总结配有难点解析文档。 15大章节,228课时,1756分钟与你一同进步!

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

多功能数字钟.zip

利用数字电子计数知识设计并制作的数字电子钟(含multisim仿真),该数字钟具有显示星期、24小时制时间、闹铃、整点报时、时间校准功能

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

想学好JAVA必须要报两万的培训班吗? Java大神勿入 如果你: 零基础想学JAVA却不知道从何入手 看了一堆书和视频却还是连JAVA的环境都搭建不起来 囊中羞涩面对两万起的JAVA培训班不忍直视 在职没有每天大块的时间专门学习JAVA 那么恭喜你找到组织了,在这里有: 1. 一群志同道合立志学好JAVA的同学一起学习讨论JAVA 2. 灵活机动的学习时间完成特定学习任务+每日编程实战练习 3. 热心助人的助教和讲师及时帮你解决问题,不按时完成作业小心助教老师的家访哦 上一张图看看前辈的感悟: &nbsp; &nbsp; 大家一定迫不及待想知道什么是极简JAVA学习营了吧,下面就来给大家说道说道: 什么是极简JAVA学习营? 1. 针对Java小白或者初级Java学习者; 2. 利用9天时间,每天1个小时时间; 3.通过 每日作业 / 组队PK / 助教答疑 / 实战编程 / 项目答辩 / 社群讨论 / 趣味知识抢答等方式让学员爱上学习编程 , 最终实现能独立开发一个基于控制台的‘库存管理系统’ 的学习模式 极简JAVA学习营是怎么学习的? &nbsp; 如何报名? 只要购买了极简JAVA一:JAVA入门就算报名成功! &nbsp;本期为第四期极简JAVA学习营,我们来看看往期学员的学习状态: 作业看这里~ &nbsp; 助教的作业报告是不是很专业 不交作业打屁屁 助教答疑是不是很用心 &nbsp; 有奖抢答大家玩的很嗨啊 &nbsp; &nbsp; 项目答辩终于开始啦 &nbsp; 优秀者的获奖感言 &nbsp; 这是答辩项目的效果 &nbsp; &nbsp; 这么细致的服务,这么好的氛围,这样的学习效果,需要多少钱呢? 不要1999,不要199,不要99,只要9.9 是的你没听错,只要9.9以上所有就都属于你了 如果你: 1、&nbsp;想学JAVA没有基础 2、&nbsp;想学JAVA没有整块的时间 3、&nbsp;想学JAVA没有足够的预算 还等什么?赶紧报名吧,抓紧抢位,本期只招300人,错过只有等时间待定的下一期了 &nbsp; 报名请加小助手微信:eduxy-1 &nbsp; &nbsp;

Python可以这样学(第一季:Python内功修炼)

董付国系列教材《Python程序设计基础》、《Python程序设计(第2版)》、《Python可以这样学》配套视频,讲解Python 3.5.x和3.6.x语法、内置对象用法、选择与循环以及函数设计与使用、lambda表达式用法、字符串与正则表达式应用、面向对象编程、文本文件与二进制文件操作、目录操作与系统运维、异常处理结构。

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

机器学习实战系列套餐(必备基础+经典算法+案例实战)

机器学习实战系列套餐以实战为出发点,帮助同学们快速掌握机器学习领域必备经典算法原理并结合Python工具包进行实战应用。建议学习顺序:1.Python必备工具包:掌握实战工具 2.机器学习算法与实战应用:数学原理与应用方法都是必备技能 3.数据挖掘实战:通过真实数据集进行项目实战。按照下列课程顺序学习即可! 课程风格通俗易懂,用最接地气的方式带领大家轻松进军机器学习!提供所有课程代码,PPT与实战数据,有任何问题欢迎随时与我讨论。

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

HoloLens2开发入门教程

本课程为HoloLens2开发入门教程,讲解部署开发环境,安装VS2019,Unity版本,Windows SDK,创建Unity项目,讲解如何使用MRTK,编辑器模拟手势交互,打包VS工程并编译部署应用到HoloLens上等。

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

MFC一站式终极全套课程包

该套餐共包含从C小白到C++到MFC的全部课程,整套学下来绝对成为一名C++大牛!!!

【数据结构与算法综合实验】欢乐连连看(C++ & MFC)案例

这是武汉理工大学计算机学院数据结构与算法综合实验课程的第三次项目:欢乐连连看(C++ & MFC)迭代开发代码。运行环境:VS2017。已经实现功能:开始游戏、消子、判断胜负、提示、重排、计时、帮助。

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

u-boot-2015.07.tar.bz2

uboot-2015-07最新代码,喜欢的朋友请拿去

php+mysql学生成绩管理系统

学生成绩管理系统,分三个模块:学生,教师和管理员。 管理员模块:负责学生、老师信息的增删改;发布课程信息的增删改,以便让学生选课;审核老师提交的学生成绩并且打印成绩存档;按照课号查询每个课号的学生成绩

web网页制作期末大作业

分享思维,改变世界. web网页制作,期末大作业. 所用技术:html css javascript 分享所学所得

Git 实用技巧

这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。

Windows版YOLOv4目标检测实战:训练自己的数据集

课程演示环境:Windows10; cuda 10.2; cudnn7.6.5; Python3.7; VisualStudio2019; OpenCV3.4 需要学习ubuntu系统上YOLOv4的同学请前往:《YOLOv4目标检测实战:训练自己的数据集》 课程链接:https://edu.csdn.net/course/detail/28745 YOLOv4来了!速度和精度双提升! 与 YOLOv3 相比,新版本的 AP (精度)和 FPS (每秒帧率)分别提高了 10% 和 12%。 YOLO系列是基于深度学习的端到端实时目标检测方法。本课程将手把手地教大家使用labelImg标注和使用YOLOv4训练自己的数据集。课程实战分为两个项目:单目标检测(足球目标检测)和多目标检测(足球和梅西同时检测)。 本课程的YOLOv4使用AlexyAB/darknet,在Windows系统上做项目演示。包括:安装软件环境、安装YOLOv4、标注自己的数据集、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算)和先验框聚类分析。还将介绍改善YOLOv4目标检测性能的技巧。 除本课程《Windows版YOLOv4目标检测实战:训练自己的数据集》外,本人将推出有关YOLOv4目标检测的系列课程。请持续关注该系列的其它视频课程,包括: 《Windows版YOLOv4目标检测实战:人脸口罩佩戴检测》 《Windows版YOLOv4目标检测实战:中国交通标志识别》 《Windows版YOLOv4目标检测:原理与源码解析》

汽车行驶工况构建2019 D题.zip

1. 标记0与0之间的片段位置 2.标记所之间的毛刺数的位置 3.去掉毛刺数据 速度 并生成 新的数组 4.标记时间段 5. 0与0之间 如果有不连续的时间片段 置零 先找到时间间隔 再看间隔时间对应

2019 AI开发者大会

2019 AI开发者大会(AI ProCon 2019)是由中国IT社区CSDN主办的AI技术与产业年度盛会。多年经验淬炼,如今蓄势待发:2019年9月6-7日,大会将有近百位中美顶尖AI专家、知名企业代表以及千余名AI开发者齐聚北京,进行技术解读和产业论证。我们不空谈口号,只谈技术,诚挚邀请AI业内人士一起共铸人工智能新篇章!

相关热词 c#跨线程停止timer c#批量写入sql数据库 c# 自动安装浏览器 c#语言基础考试题 c# 偏移量打印是什么 c# 绘制曲线图 c#框体中的退出函数 c# 按钮透明背景 c# idl 混编出错 c#在位置0处没有任何行
立即提问